在不使用jQuery的情况下定位div内部的特定元素

Question

我有一个项目列表，我想听哪个项目被点击，并更改该项目内部div的CSS。

var inactiveItems = document.getElementsByClassName('inactive');

for (var i = 0; i < inactiveItems.length; i++) {
  inactiveItems[i].addEventListener('click', handleClick, false);
}

function handleClick(e) {
  var width = document.body.clientWidth;
  console.log(e.target);
  if (width < 960) {
    e.target.style.top = '0px';
  }
}

这是我的HTML：

<li class="days_item days_item inactive"">
  <span>19</span>
  <div class="locked-item"></div>
</li>

我想更改事件目标内的.locked-item上的CSS，而不是目标本身。

Answer 1

而不是访问e.target （它是被点击的元素），访问e.currentTarget以获取事件监听器最初附加到的元素。 然后你可以通过链接.querySelector('.locked-item')来选择子.locked-item ：

这里的例子

function handleClick(e) {
    var width = document.body.clientWidth,
        day = e.currentTarget,
        lockedItem = day.querySelector('.locked-item');

    if (width < 960 && lockedItem !== null) {
        lockedItem.style.top = '0px';
    }
}

Answer 2

一种方法是使用this.getElementsByClassName('locked-item')[0]来选择<div> 。

 var inactiveItems = document.getElementsByClassName('inactive'); for (var i = 0; i < inactiveItems.length; i++) { inactiveItems[i].addEventListener('click', handleClick, false); } function handleClick(e){ var width = document.body.clientWidth; console.log(e.target); if (width < 960) { e.target.style.top = '0px'; } this.getElementsByClassName('locked-item')[0].style.background = 'yellow'; } 

 <li class="days_item days_item inactive"> <span>19</span> <div class="locked-item">x</div> <!-- I added some text, just so you see the div --> </li> 

阅读：

• this - JavaScript | MDN
• .getElementsByClassName() - Web API | MDN