Wählen Sie den inneren Text eines divs, wenn Sie das Kontrollkästchen aktivieren

Question

Wenn ich auf das Kontrollkästchen klicke, wird der gesamte Titel innerhalb der divs angezeigt. Ich brauche es nur, um den Titel innerhalb der div, auf die ich klicke, zu warnen. Ich hoffe, dass jemand mir mit JavaScript-Code kann helfen (nicht 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

Versuchen Sie es mit serviceTitle [t] .innerHTML

Answer 2

Sie keine Schleife für diese benötigen, aus dem Event-Handler können Sie currentElement zugreifen, von diesem erhalten Eltern checkdivwrp und von dem Kind serveTitle, so etwas wie dieses:

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); 
 
      }); 
 
     });

<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 3

Statt durch alle serveTitle s Looping, können Sie die entsprechende serveTitle mit diesem wählen:

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

Siehe Demo unter:

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

<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>