Question

页面中的每个ID重复2次（如果一次，那还是不错的）

我想要这些的代码脚本

<button onclick="myFunction('<div id="my-id">')">Button</button>
<div id="<div id="my-id">"></div>

<button onclick="myFunction('<div id="my-id">')">Button</button>
<div id="<div id="my-id">"></div>

<button onclick="myFunction('<div id="my-id">')">Button</button>
<div id="<div id="my-id">"></div>

                           ?work?

<button onclick="myFunction('1')">Button</button>
<div id="1"></div>

<button onclick="myFunction('2')">Button</button>
<div id="2"></div>

<button onclick="myFunction('3')">Button</button>
<div id="3"></div>
                                      ...

Answer 1

Id必须是唯一的。使用class标记butto0ns，您将在该位置上的下一个同级上生成id并添加事件侦听器：

要在点击时生成具有唯一ID的同级div：

let i = 0;


[...document.querySelectorAll('.click')].forEach(button => {
  button.addEventListener('click', event => {
    let div = document.createElement("div")
    div.id = ++i;
    //generate unique id: ++i
    div.innerHTML = i;
    // to use it after generate use just i
    event.target.parentNode.insertBefore(div,event.target.nextSibling);
    //add sibiling after button click
  })
})

示例

let i = 0;


[...document.querySelectorAll('.click')].forEach(button => {
  button.addEventListener('click', event => {
    let div = document.createElement("div")
    div.id = ++i;
    //generate unique id: ++i
    div.innerHTML = i;
    // to use it after generate use just i
    event.target.parentNode.insertBefore(div,event.target.nextSibling);
    //add sibiling after button click
  })
})

<button class="click">Button</button>


<button class="click">Button</button>


<button class="click">Button</button>

生成ID并将其添加到下一个兄弟div：**

let i = 0;


[...document.querySelectorAll('.click')].forEach(button => {
  button.addEventListener('click', event => {
    event.target.nextElementSibling.id = ++i;
    //generate unique id: ++i

    event.target.nextElementSibling.innerHTML = event.target.nextElementSibling.innerHTML + " id:" + i;
    // add it innerhtml just to show

    console.clear();
    console.log(event.target.nextElementSibling.id);
    //show new id of element
  })
})

示例

let i = 0;

[...document.querySelectorAll('.click')].forEach(button => {
  button.addEventListener('click', event => {
    event.target.nextElementSibling.id = ++i;
    //generate unique id: ++i

    event.target.nextElementSibling.innerHTML = event.target.nextElementSibling.innerHTML + " id:" + i;
    // add it innerhtml just to show

    console.clear();
    console.log(event.target.nextElementSibling.id);
    //show new id of element
  })
})

<button class="click">Button</button>
<div>test div</div>

<button class="click">Button</button>
<div>test div</div>

<button class="click">Button</button>
<div>test div</div>

如果您需要在单击多个元素时使用唯一的东西，请生成唯一的CSS类并应用于这些元素：

let i = 0;

document.querySelector('button').addEventListener('click', event => {
  let clickClass = "clickClass" + (++i);
  //generate unique class: clickClass++i
  [...document.querySelectorAll('div')].forEach(div => {
    div.classList.add(clickClass);
    //add class to each div

    div.innerHTML = div.innerHTML + " " + clickClass;
    // add it innerhtml just to show
  })
})

示例：

let i = 0;

document.querySelector('button').addEventListener('click', event => {
  let clickClass = "clickClass" + (++i);
  //generate unique class: clickClass++i
  [...document.querySelectorAll('div')].forEach(div => {
    div.classList.add(clickClass);
    //add class to each div

    div.innerHTML = div.innerHTML + " " + clickClass;
    // add it innerhtml just to show
  })
})

<button class="click">Button</button>
<div>test div</div>
<div>test div</div>
<div>test div</div>

如何通过使用javascript重复ID获得不同的数字？

1 个答案: