我有div的複選框我需要當我點擊它獲得div的內部文本我點擊它只有

我有div的複選框我需要當我點擊它獲取div的內部文本我點擊它只有我有div的複選框我需要當我點擊它獲得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">           
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 1</div> 
 
</div> 
 
<div class="checkdivwrp">           
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 2</div> 
 
</div> 
 
<div class="checkdivwrp">           
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 3</div> 
 
</div>

來源

2017-08-13 Kareem Nagy

您需要使用on('click'如果複選框被選中或不檢查。如果被選中，使用$(this).parent().find('.serveTitle').text()得到內部文本：

$(".checkbox__toggle").on('click', function() { 
 
    if ($(this).is(':checked')) 
 
    console.log($(this).parent().find('.serveTitle').text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkdivwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 1</div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 2</div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 3</div> 
 
</div>

來源

2017-08-13 13:25:32

在JavaScript中（現在用的指標，以避免父母和兄弟姐妹的混亂）：

var serviceChecked = document.querySelectorAll('.checkbox__toggle'); 
 
var serviceTitle = document.querySelectorAll('.serveTitle'); 
 
serviceChecked.forEach(function(service, index){ 
 
    service.addEventListener('click',function(){ 
 
     alert(serviceTitle[index].innerText); 
 
    }); 
 
});

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

來源

2017-08-13 13:32:33

nextSibling可以是任何東西。理想情況下，我們應該按照課程名稱去。像'''var child = this.parentElement.getElementsByClassName（「serveTitle」）[0];'' – Ashvin777

在他的代碼中，它不是任何東西，它是serveTitle，總是serveTitle！ –

嘗試使用純Javascript。你不需要任何外部庫。

var serviceChecked = document.querySelectorAll('.checkbox__toggle'); 
 
var serviceTitle = document.querySelectorAll('.serveTitle'); 
 

 

 

 
serviceChecked.forEach(function(listItem) { 
 
    listItem.addEventListener('click', function(e) { 
 
    
 
    var child = this.parentElement.getElementsByClassName("serveTitle")[0]; 
 
     
 
    alert(child.innerHTML) 
 
    }); 
 
});

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

來源

2017-08-13 13:32:53 Ashvin777

它只有在serveTitle類是parentElement的時候才起作用這個類在我的真實代碼中包含div div –

的div div這個基本上是指單擊元素上下文中的「checkdivwrp」。根據您的意見，它不是「serveTitle」元素。上述解決方案的解釋 - 只需轉到單擊元素的父級，然後搜索父級體內的元素。這是一個閒置的解決方案。 – Ashvin777

編輯：nextSibiling如果它緊跟目標元素，如果你不知道它的確切位置，你可以做你必須使用電子下文

搜索。目標以獲得實際點擊的目標，然後檢查其父級的子級的名稱：

var serviceChecked = document.querySelectorAll('.checkbox__toggle'); 

serviceChecked.forEach(function(listItem){ 
    listItem.addEventListener('click', function(e){ 
    var parent = e.target.parentNode; //you can use this instead of e.target 
    for (var i = 0; i < parent.childNodes.length; i++) { 
     if (parent.childNodes[i].className == "serveTitle") { 
     alert(parent.childNodes[i].innerText) 
     break; 
     }   
    } 
    }); 
})

來源

2017-08-13 13:34:12 silviajoy

我有div的複選框我需要當我點擊它獲得div的內部文本我點擊它只有

回答

相關問題