選擇複選框時選擇div的內部文本

當我點擊複選框時，它會提醒div內的所有標題。我只需要提醒我點擊的div內的標題。我希望任何一個可以幫助我javascript代碼（不是jQuery的）選擇複選框時選擇div的內部文本

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>

來源

2017-08-13 Kareem Nagy

我已將[tag：java]標籤更改爲[tag：javascript]標籤。請理解，這是兩種完全不同的編程語言，與漢堡一樣緊密相關，如果你錯誤地標記了你的問題，你將不會得到正確的專家來檢查它，並且這可能會傷害你獲得漢堡的機會體面的幫助。由於我對JavaScript一無所知，這就是我能爲你做的所有事情，除非希望你很好，並希望你很快得到一個體面的答案。 –

感謝我得到它。 –

嘗試使用serviceTitle [T] .innerHTML

來源

2017-08-13 15:39:35

你不需要一個循環爲此，從事件處理程序，您可以訪問currentElement，從得到父母checkdivwrp，並從獲得孩子 serveTitle，這樣的事情：

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>

來源

2017-08-13 15:41:01 Dij

而不是通過所有serveTitle小號循環，您可以使用選擇對應的serveTitle這樣的：

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

觀看演示如下：

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>

來源

2017-08-13 15:43:06 kukkuz

選擇複選框時選擇div的內部文本

回答

相關問題