使用纯Javascript

Question

我试图用纯JS获取每个列表项数据的值。

＆＃13;

＆＃13;

const meetTheTeamSectionNames = document.querySelectorAll('.team__names li');

Array.from(meetTheTeamSectionNames).forEach(name => {
  name.addEventListener('click', function(e) {
    const nameMe = e.target.getAttribute('name')
    console.log(nameMe);
  });
});

＆＃13;

<ul class="team__names">
  <li class="current" data-name="neil">Neil Tully MW</li>
  <li data-name="kevin">Kevin Rylands</li>
  <li data-name="jane">Jane Coggins</li>
  <li data-name="ben">Ben Green</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

出于某种原因，每次点击都会返回null ...我不明白为什么。 任何帮助都会很棒：）

Answer 1

只需替换

let x = 1 in x + 1

与

const nameMe = e.target.getAttribute('name')

也许你对const nameMe = e.target.getAttribute('data-name') 感到困惑，因为我们有两个可以获得价值的可能性

• jQuery
• $(selector).attr('data-name');，（如果您使用较新的jQuery＆gt; = 1.4.3）

＆＃13;

＆＃13;

$(selector).data('name');

＆＃13;

const meetTheTeamSectionNames = document.querySelectorAll('.team__names li');
    Array.from(meetTheTeamSectionNames).forEach(name => {
        name.addEventListener('click', function(e) {
            const nameMe = e.target.getAttribute('data-name')
            console.log(nameMe);
        });
    });

＆＃13;

＆＃13;

＆＃13;