Question

当我点击复选框时，它会提示div内的所有标题。我只需要提醒我点击的div中的标题。我希望任何人都可以帮助我使用javascript代码（而不是jquery）

var serviceChecked = document.querySelectorAll('.checkbox__toggle');
var serviceTitle = document.querySelectorAll('.serveTitle');

serviceChecked.forEach(function(listItem) {
  listItem.addEventListener('click', function(e) {
    for (var t = 0; t < serviceTitle.length; t++) {
      alert(serviceTitle[t].innerText);
    }
  });
});

<div class="checkdivwrp">
  <div class="checkwrp">
    <input class='checkbox__toggle' type='checkbox'>
  </div>
  <div class="titlewrp">
    <div class="serveTitle">title 1</div>
  </div>
</div>
<div class="checkdivwrp">
  <div class="checkwrp">
    <input class='checkbox__toggle' type='checkbox'>
  </div>
  <div class="titlewrp">
    <div class="serveTitle">title 2</div>
  </div>
</div>
<div class="checkdivwrp">
  <div class="checkwrp">
    <input class='checkbox__toggle' type='checkbox'>
  </div>
  <div class="titlewrp">
    <div class="serveTitle">title 3</div>
  </div>
</div>

Answer 1

你不需要一个循环，从事件处理程序，你可以访问currentElement，从那个获取父checkdivwrp和那个获取子 serveTitle，像这样：

＆＃13;

   var serviceChecked = document.querySelectorAll('.checkbox__toggle');
        var serviceTitle = document.querySelectorAll('.serveTitle');

        serviceChecked.forEach(function(listItem){
            listItem.addEventListener('click', function(e){
                var parent = e.currentTarget.parentElement.parentElement; //get to checkwrp -> checkdivwrp
                var titleElement = parent.getElementsByClassName('serveTitle')[0]; //get to class serveTitle
                alert(titleElement.innerHTML);
            });
        });

＆＃13;

<div class="checkdivwrp">
  <div class="checkwrp">
     <input class='checkbox__toggle' type='checkbox'>
  </div>    
  <div class="titlewrp">
      <div class="serveTitle">title 1</div>
   </div>
</div>
<div class="checkdivwrp">
  <div class="checkwrp">
     <input class='checkbox__toggle' type='checkbox'>
  </div>    
  <div class="titlewrp">
      <div class="serveTitle">title 2</div>
   </div>
</div>
<div class="checkdivwrp">
  <div class="checkwrp">
     <input class='checkbox__toggle' type='checkbox'>
  </div>    
  <div class="titlewrp">
      <div class="serveTitle">title 3</div>
   </div>
</div>

＆＃13;

Answer 2

您可以使用以下选项serveTitle来代替循环通过所有serveTitle：

e.target.parentElement // select 'checkwrp'
        .parentElement // select 'checkdivwrp'
        .querySelector('.titlewrp > .serveTitle').textContent

见下面的演示：

＆＃13;

var serviceChecked = document.querySelectorAll('.checkbox__toggle');
serviceChecked.forEach(function(listItem) {
  listItem.addEventListener('click', function(e) {
    alert(e.target.parentElement
                  .parentElement
                  .querySelector('.titlewrp > .serveTitle').textContent);
  });
});

＆＃13;

<div class="checkdivwrp">
  <div class="checkwrp">
    <input class='checkbox__toggle' type='checkbox'>
  </div>
  <div class="titlewrp">
    <div class="serveTitle">title 1</div>
  </div>
</div>
<div class="checkdivwrp">
  <div class="checkwrp">
    <input class='checkbox__toggle' type='checkbox'>
  </div>
  <div class="titlewrp">
    <div class="serveTitle">title 2</div>
  </div>
</div>
<div class="checkdivwrp">
  <div class="checkwrp">
    <input class='checkbox__toggle' type='checkbox'>
  </div>
  <div class="titlewrp">
    <div class="serveTitle">title 3</div>
  </div>
</div>

＆＃13;

Answer 3

尝试使用serviceTitle [t] .innerHTML

选中复选框时，选择div的内部文本

3 个答案: