Question

我有下一个情况。我有一个HTML代码按钮。当我按下按钮中的一个选项时，我会调用一个从其他按钮构建内容的函数。

我在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>

在这里，您可以看到我必须在按钮内生成li标签的代码。

<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>

我的问题是...... 如何从动态生成的li标签中获取ID？

我尝试使用“getElementByID”和“getElementByTagName”但由于ID是动态的，我不知道是否抓住了这个值。

例如，按钮具有下一个选项： - apple（ID = element0） - bannana（ID = element1） - 胡萝卜（ID = element2）

当我选择“bannana”选项时，我需要获取ID“element1”。

Answer 1

您可以在容器上使用querySelectorAll来获取元素列表，然后阅读其属性ID。

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

但是，我宁愿建议创建一个数据层抽象来处理与数据获取相关的操作等...以避免在你的html结构和你的＆＃34;逻辑上的强耦合。代码。

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

所以您的按钮处理程序可以共享＆＃34;存储＆＃34;

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

如何从“ul”动态标签中获取ID

1 个答案: