json 使用addEventListener和getElementsByClassName传递元素id

jq6vz3qz 于 2023-06-25 发布在其他

关注(0)|答案(5)|浏览(100)

我正在从JSON文件中定义一个项目列表，并在网页上显示该列表。这样做的目的是让用户单击列表中的任何项目，以显示有关该项目的更多信息（保存在同一JSON文件中的信息）。
该列表的所有项都是同一个类的成员，并且每个项都有一个从JSON文件定义的唯一id。HTML看起来像这样：

<ul>
   <li class="menu" id="bob">Robert Smith</li>
   <li class="menu" id="jane">Jane Doe</li>
   <li class="menu" id="sue">Susan Carter</li>
</ul>

我本来打算用一些
var userSelection = document.getElementsByClassName('menu');
与...一致
userSelection.addEventListener('click', myFunctionToPrintDetails());
但是我不确定如何将ID从事件侦听器传递给打印函数，以便确定要打印哪些细节。
我有很多HTML/CSS的经验，但很少有JSON/ AJAX ，所以我可能会去这个完全bass-ackwards。如果有更合适的方法来完成这件事，我愿意接受反馈。
我试了两个答案，但都不管用。当我将userSelection.length记录到控制台时，我得到0;当我记录userSelection时，我得到：

HTMLCollection(0)
> sue: li#sue.menu
length: 3
> jane: li#jane.menu
> bob: li#bob.menu
> 0: li#bob.menu
> 1: li#jane.menu
> 2: li#sue.menu

JSON

来源：https://stackoverflow.com/questions/42080365/using-addeventlistener-and-getelementsbyclassname-to-pass-an-element-id

5条答案

按热度按时间

y4ekin9u1#

codepen demo

var userSelection = document.getElementsByClassName('menu');

for(var i = 0; i < userSelection.length; i++) {
  (function(index) {
    userSelection[index].addEventListener("click", function() {
       console.log("Clicked index: " + index);
     })
  })(i);
}

正如@torazaburo在评论中指出的，如果您想要支持的浏览器符合ECMAScript 6（ES6），最新版本的JavaScript，则可以使用以下内容。

var userSelection = document.getElementsByClassName('menu');

for(let i = 0; i < userSelection.length; i++) {
  userSelection[i].addEventListener("click", function() {
    console.log("Clicked index: " + i);
  })
}

赞(0）回复(0）举报 2023-06-25

pgx2nnw82#

我会这么做。首先，我会使用Object值创建一个数组。

const userSelection = Object.values(document.getElementsByClassName('menu'));

然后我会用foreach循环通过它们。

userSelection.forEach(link => {
    link.addEventListener(event => {
        event.preventDefault();
        // more code here
    });
});

小菜一碟！

赞(0）回复(0）举报 2023-06-25

to94eoyn3#

您可以从响应click事件的元素中获取id，该元素使用this.id：

var items = document.getElementsByClassName('menu');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', printDetails);
}

function printDetails(e) {
  console.log("Clicked " + this.id);
}

<ul>
   <li class="menu" id="bob">Robert Smith</li>
   <li class="menu" id="jane">Jane Doe</li>
   <li class="menu" id="sue">Susan Carter</li>
</ul>

赞(0）回复(0）举报 2023-06-25

vtwuwzda4#

<ul id = "menuList">
   <li class="menu" id="bob">Robert Smith</li>
   <li class="menu" id="jane">Jane Doe</li>
   <li class="menu" id="sue">Susan Carter</li>
</ul>

// JS - Event Bubbling
const menuList= document.getElementById("menuList");
menuList.addEventListener("click", function (e) {
        console.log(e.target); // log clicked element 
});

赞(0）回复(0）举报 2023-06-25

zzlelutf5#

以下是我一直在使用的一个简短版本：

[...(document.getElementsByClassName('__MYCLASSNAME__'))].forEach(d => {
  d.addEventListener('click', MYFUNCTION__);
})

赞(0）回复(0）举报 2023-06-25

我来回答

json 使用addEventListener和getElementsByClassName传递元素id

5条答案

相关问题

热门标签

最新问答