Question

我只是在学习javascript并遇到了问题我正在尝试定位最接近的类并更改值，但我只是继续获取无法在HTMLUListElement中读取null的属性'innerText'。
这是不可能的还是我应该研究另一种方式？任何帮助或指导表示赞赏。

<div id="someId">
<h2>Test</h2>
<ul>
    <li>
        <p class="amount">5</p>
        <span class="name">My Name</span>
        <button class="plus">Plus</button>
    </li>
    <li>
        <p class="amount">10</p>
        <span class="name">My Name 2</span>
        <button class="plus">Plus</button>
    </li>
    <li>
        <p class="amount">15</p>
        <span class="name">My Name 3</span>
        <button class="plus">Plus</button>
    </li>
</ul>

const someList = document.querySelector('#someId ul');

someList.addEventListener('click', function(e) {
if (e.target.className === 'plus') {
    let newValue = e.target.closest('.amount');
    newValue.innerText += "5";
}
});

我已将.amount更改为许多不同的内容，p和li＆gt;等等，但没有运气。

Answer 1

.closest关注祖先，.amount不是一个。您可以转到.parentNode，然后转到.firstElementChild。

我个人使用.matches()而不是比较类名以获得完全相等。

someList.addEventListener('click', function(e) {
    if (e.target.matches('.plus')) {
        let newValue = e.target.parentNode.firstElementChild;
        newValue.innerText += "5";
    }
});

Answer 2

在javascript中，您可以定位父级并选择匹配的子级

const someList = document.querySelector('#someId ul');
someList.addEventListener('click', function(e) {
  if (e.target.className === 'plus') {
    let newValue = e.target.parentNode.querySelector('.amount').innerText += "5";
  }
});

<div id="someId">
  <h2>Test</h2>
  <ul>
    <li>
      <p class="amount">5</p>
      <span class="name">My Name</span>
      <button class="plus">Plus</button>
    </li>
    <li>
      <p class="amount">10</p>
      <span class="name">My Name 2</span>
      <button class="plus">Plus</button>
    </li>
    <li>
      <p class="amount">15</p>
      <span class="name">My Name 3</span>
      <button class="plus">Plus</button>
    </li>
  </ul>
</div>

Answer 3

.closest()向上查看祖先的dom / xpath。您的p.amount是兄弟，而不是祖先，因此您的.closest()

不会返回任何内容

您想要做的事情没有单一的核心js方法。 jQuery提供了一个名为.siblings()的函数，如果你想使用它，它最接近你想要做的事情。但对于纯javascript，要点是上dom / xpath树然后退回。

你可以采用不同的方式，取决于你想要的选择器和＃34;锚点＃34;。 @doodlemeister的答案是一种方法，但IMO并不是很好，因为它可能没有你想要的那么灵活。它假定上升到第一个父母，然后回到第一个孩子。它希望你的html结构与你现在完全一样。

更灵活的方式是这样的：

const someList = document.querySelector('#someId ul');
someList.addEventListener('click', function(e) {
    if (e.target.className === 'plus') {
        let newValue = e.target.closest('li').querySelector('.amount');
        newValue.innerText = +newValue.innerText + 5;
    }
});

然后，您可以根据需要调整.closest()选择器，然后使用querySelector()从那里返回dom / xpath并按原来的目标类进行定位。

在javascript中定位最接近的类

3 个答案: