總結:如何獲取同一個DIV里的多個不同子標簽的值,並賦值給input?


這個問題說起來簡單,但對於新手來說,也着實卡了好久,並且我在網上搜了好久沒能找到合適的答案,

於是去博問問了一下,得到許多大神們的幫助與回答,接下來我就總結一下能夠實現這個效果的幾種方法,既為了自己更加能夠更加深刻的記住也為了萬一能夠給其他人提供到幫助,哪也不錯。

1.要實現的效果:

  要實現效果是:點擊右邊的最近聯系人列表,能夠同時獲取聯系人的名字、銀行卡號、銀行名稱的值,並將其值賦給對應的input文本框。

  

 

2.問題的分析:

  首先來簡單分析一下html代碼的結構(css就不多提了)

  • 最近每一個聯系人列表的div:

  <div  id="P1"  onclick="list(this.id)">       //點擊調用list()函數並把點擊的div相應的id值傳入

    <img src="..."/>

    <strong>shoulder</strong>                 //聯系人名字

    <span>6217000****0000</span>        //銀行卡號

    <a>Maybank</a>              //銀行名稱

  </div> 

  • input文本框的代碼結構:

   <form>

    <input  type="text"  id="CName"  />

    <input  type="text"  id="BName"/>

    <input  type="text"  id="CNo" />

  </form>

  接着分析實現效果的過程:

    1.點擊div

    2.獲取對應div的id

    3.根據id找到對應div里的子標簽<strong>、<span>、<a>

    4.獲取子標簽的值

    5.根據id找到對應的input

    6.將標簽里的值賦給對應的input

  

3.解決方法匯總:

  解決的方法是有很多的,但因為我想學習一下javascript於是就側重於Javascript的解決辦法,當然jquery也是不錯的選擇

  方法一:

  <script type="text/javascript">

    var oDiv=document.getElementById("id");

    var mynam=oDiv.firstElementChild.nextElementSibling.innerHTML;

    ducument.getElementById("CName").value=myname;

    var mybank=oDiv.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;

    document.getElementById("BName").value=mybank;

    var mynumber=oDiv.lastElementChild.innerHTML;

    document.getElementById("CNo").value=mynumber;

  </script>

  這種方法就比較繁瑣,對於div里有三個以上的子標簽時不建議使用,這時候(像本例有四個子標簽)可以用到childnodes比較好解決。

這個時候我們得到這種解決方法:

  方法二

  var oDiv=document.getElementById(id);

  myname=oDiv.childNodes[3].innerHTML;

  mybank=oDiv.childNodes[5].innerHTML;

  mynumber=oDiv.childNodes[7].innerHTML;

  document.getElementById("CName").value=myname;

  document.getElementById("BName").value=mybank;

  document.getElementById("CNo").value=mynumber;

  方法二也有缺點的地方,當使用IE瀏覽器時我們的對應的childNodes為:childNodes[1]、childNodes[2]、childNodes[3];但在其他瀏覽器上時,瀏覽器會把元素與元素之間的前后空白符也當作一個子標簽,因此當我們獲取第二個標簽<strong>時為childNodes[3],以此類推。

  這樣看的話childNodes也不是很好用,還有沒有別的類似的辦法呢? 其實有一個children屬性是可以解決瀏覽器針對這點的差別的,這時候若要獲取第一個標簽則是children[0]、第二個為children[1]這種正常順序就可以了。

  方法三:

  這是我覺得對我來說最理想的方法,因為用這種方法可以不需要去定義列表聯系人的每一個div的id值,很適合我這種現在暫時還不懂怎么動態為元素賦id值或者循環之類巴拉巴拉的(當然以后會學補回來!)。 

   <div  onclick="list(this)" >聯系人的Div</div>

  function list(dom){

  var name = dom.getElementsByTagName("strong")[0].innerHTML;
  document.getElementById("CName").value=name;

  var num = dom.getElementsByTagName("span")[0].innerHTML;
  document.getElementById("CNo").value=num;

  var bank = dom.getElementsByTagName("a")[0].innerHTML;
  document.getElementById("BName").value=bank;

 

   }

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM