jquery 如何创建和读取具有相同ID的HTML元素

2izufjch  于 2023-08-04  发布在  jQuery
关注(0)|答案(5)|浏览(140)

我有一个for循环来创建一个列表。列表中的每个项目都有一个隐藏的输入和功能,如下所示。

<input type="hidden" id="network-id" name="network_id" value="1">
<button type="button" onclick="transfer(someId);"></button>

字符串
我正在使用我的JS代码读取transfer函数中的隐藏输入。

networkId = $("#network-id").val();


但是由于每个元素ID都是相同的,所以它只读取列表中的第一个"network-id"元素。
读取每个元素的最佳方式是什么?

iyzzxitl

iyzzxitl1#

要读取列表中的每个元素,可以修改HTML代码和JavaScript逻辑。下面是一个使用改进方法的解决方案:
HTML代码:

<!-- Assuming you have a container element for the list -->
<div id="list-container">
  <!-- The for-loop that creates the list -->
  <!-- Each item in the list will have a unique index -->
  
  <input type="hidden" class="network-id" name="network_id" value="1">
  
  <button type="button" onclick="transfer(this);"></button>

  <input type="hidden" class="network-id" name="network_id" value="2">

  <button type="button" onclick="transfer(this);"></button>

  <!-- Add more items as needed -->
</div>

字符串
JS代码:

function transfer(button) {
    // Find the corresponding hidden input within the same container
    var networkId = $(button).prev('.network-id').val();
    // Rest of your logic using the networkId value
    // ...
}


说明:

  • 在HTML代码中,我们向隐藏的输入元素添加一个CSS类(network-id),而不是对所有元素使用相同的ID。这允许我们使用类选择器来选择它们。
  • 在每个按钮的onclick属性中,我们将其作为参数传递给传递函数。这会将button元素本身传递给函数。
  • 在JavaScript代码中,$(button)将button元素 Package 为jQuery对象。使用.prev('. network-id'),我们选择具有类network-id的前面的兄弟元素,这是对应的隐藏输入元素。
  • 最后,我们可以使用.val()检索隐藏输入的值,并将其分配给networkId变量。您可以使用此值继续执行逻辑的其余部分。

通过使用这种方法,您可以读取列表中每个项的隐藏输入值,即使它们具有相同的类名。

8fq7wneg

8fq7wneg2#

使用一个class name或只取每个按钮的previous element sibling

function transfer(button){
  console.log(button.previousElementSibling.value);
}

个字符

jc3wubiy

jc3wubiy3#

使用内联事件处理程序通常是not a good idea
ID应该是唯一的,所以你应该使用其他的东西来标识字段/元素。我建议data-attributes
使用data-attributes,您甚至不需要隐藏输入字段来存储值。可以直接为按钮指定值。
考虑到这一点,这里有一个minimal reproducable example,它使用event Delegation处理按钮,并从按钮的data-attribute中读取值。

document.addEventListener(`click`, handle);

createSomeButtons();

function handle(evt) {
  if (evt.target.dataset.bttnid) {
    console.clear();
    console.log(`transfer value: ${evt.target.dataset.value}`);
  }
}

function createSomeButtons() {
  const bttns = [...Array(10)].map( (_, i) => {
    const bttn = document.createElement(`button`);
    bttn.dataset.bttnid = `${i + 1}`;
    bttn.dataset.value = `bttn ${i + 1}`;
    bttn.textContent = `transfer ${i + 1}`;
    return bttn.outerHTML; } );
  document.body.insertAdjacentHTML(`beforeend`, bttns.join(`<br>`));
}

字符串

cuxqih21

cuxqih214#

元素ID应唯一。您可以调整代码,使其为每个元素提供相同的类,或者为每个元素提供唯一的id。

j91ykkif

j91ykkif5#

创建一个函数,并在每次循环运行后添加++。

相关问题