主页 / 问题 / 932231
Accepted
Alisa Bondarchuk
Asked:2020-01-15 13:13:36 +0000 UTC2020-01-15 13:13:36 +0000 UTC

如何将按钮 id 从 html 传递给 js 对象？

  • 772

热心帮助。我有这种情况，HTML文件中有两个不同id的按钮，我需要获取所有按钮的所有id，类为.btn并将它们传递给我可以访问的js中的外部对象，但我不明白如何实现这一切。然后我需要这个对象以便从中提取 id 进行搜索。任何帮助都会有所帮助，在此先感谢。

HTML 文件

<ul>
   <li><button id="but1">ButtonOne</button></li>
   <li><button id="but2">ButtonTwo</button></li> 
</ul>

js最终文件

objData = {
  id: but1,
  id: but2
}
javascript

3 个回答

  1. MDN

    HTMLButtonElement从其父级HTMLElement继承属性

    getElementsByClassName - 用于获取类.btn为NodeList的所有元素

    Convert_NodeList_to_Array

    let obj = {}

let btnList = Array.from(document.getElementsByClassName('btn'))

btnList.forEach(button => {
    let { id, innerText } = button
    obj[id] = innerText
})

console.log(obj)

for (let key in obj) {
    let val = obj[key]
    console.log(`id: ${key} innerText: ${val}`)
}
    <ul>
   <li><button id="but1" class="btn">ButtonOne</button></li>
   <li><button id="but2" class="btn">ButtonTwo</button></li> 
</ul>

    • 4
  2. Best Answer

    var buttons = [];

/*$("button.btn").each(function(){
  buttons.push({ id: this.id });
});*/

document.querySelectorAll("button.btn").forEach(
  btn => buttons.push({ id: btn.id })
);

console.log(JSON.stringify(buttons));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li><button id="but1" class="btn">ButtonOne</button></li>
   <li><button id="but2" class="btn">ButtonTwo</button></li> 
</ul>

    • 3

  3. 我找不到解决方案，这就是它的样子

    [...document.getElementsByClassName('btn-view')].reduce((a, c, i ) => (a['H' + i + ' - h ' + i] = {name: c.name, id: c.id}, a), {}); console.log(objData);
    • 2

相关问题