2017-12-27 63 views
1

我有下一種情況。 我在HTML代碼中有一個按鈕。當我按下按鈕中的其中一個選項時,我調用一個函數來構造其他按鈕的內容。如何從「ul」動態標籤獲得ID

我在HTML代碼中有一個ul標籤,裏面有一個li標籤列表。這個li標籤的值是用查詢數據庫動態生成的。 當我從li標籤生成選項時,我爲彼此分配了不同的ID。 在這裏你可以看到,我有第二個按鈕的代碼:

<div class="dropdown" class="btn-group-lg" id="test"> 
<button name="selSensor" id="seltipoSensor" class="btn btn-primary dropdown- 
toggle" type="submit" data-toggle="dropdown"> 
    <span>Select one option</span> 
</button> 
<ul class="dropdown-menu" id="test2"> 
</ul> 
</div> 

在這裏你可以看到,我要生成按鈕內部的李標籤的代碼。

<script type="text/javascript"> 


function selectedUbi(ubicacion){ 
    var datos = { 
    "arg" : ubicacion 
    }; 
    $.ajax({ 
    data: datos, 
    url: 'condatabase/calculos_bdd2.php', 
    type: 'post', 
    success: function (response) { 
     if(response){ 
      document.getElementById("test2").innerHTML = ""; 
      var ul = document.getElementById("test2"); 
      for (i=0;i<response.length;i++){ 
       var li = document.createElement("li"); 
       li.appendChild(document.createTextNode(response[i][i+1])); 
       li.setAttribute("id", "element"+i); 
       li.setAttribute("onclick",myFunction); 
       ul.appendChild(li); 
      } 
     } 
    }, 
    dataType:"json" 
    }); 
} 
</script> 

我已經是問題... ?我怎樣才能從L1標籤,我動態生成的ID?

我試圖使用「getElementByID」和「getElementByTagName」,但由於ID是動態的,我不知道要捕獲該值。

例如按鈕具有下一個選項以選擇: - 蘋果(ID =部件0) - bannana(ID =元素1) - 胡蘿蔔(ID =在element2)

當我選擇選項「bannana 「我需要獲得ID」element1「。

+2

兩件事情。首先,你的'myFunction'代碼在哪裏?其次,如果您使用jQuery,爲什麼不使用* jQuery? – j08691

回答

0

您可以在容器上使用querySelectorAll來獲取元素列表,然後閱讀其屬性ID。

function getIds(container){ 
    return [...container.querySelectorAll('li[id]')].map(li => li.getAttribute('id')); 
} 

不過,我寧願建議創建一個數據抽象層來處理與數據獲取等操作......爲避免你的HTML結構和你的「邏輯」代碼的強耦合。

function createStore(){ 
    return { 
    async fetch(arg){ /*... return your data (and cache it etc */ } 
    }; 
} 

讓你的按鈕處理程序可以共享 「存儲」

const store = createStore(); 

document.getElementBy('button1').addEventListener('click',() => { 
    store.fetch().then(data => { /* do something with your data like updating html ... */}) 
}); 

document.getElementBy('button2').addEventListener('click',() => { 
    store.fetch().then(data => { /* do something with your data like updating html ... */}) 
}); 

//etc