當我點擊任何子div時，我必須觸發父div。

Question

我的html代碼：如果我點擊演示類中的任何子div，它會觸發父級ID即（id：1,2,3，....）。

<div class="click"> 

    <div class="category-list demo" id="1" data-dismiss="modal"> 
     <div class="category-name"> 
      technology 
     </div> 
     <div class="category-progress"> 
      <div class="progress"> 
       <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
        <span class="sr-only">70% Complete</span> 
       </div> 
      </div> 

     </div> 
    </div> 

</div> 

<div> 
    <section class="timeline" id="a"></section> 
    <section class="timeline" id="b"></section> 
    <section class="timeline" id="c"></section> 
</div> 

jQuery代碼：

window.onload = function() { 

    document.querySelector('.click').addEventListener('click', function(e) { 

     var id=e.target.id; 
     var val=Number(id); 
     if(val===NaN){ 
     console.log(val); 

     } 
    else{ 
     currentDiv(val);  
      console.log("Number:"+val); 

    } 
    }); 
}; 
var slideIndex = 1; 
showDivs(slideIndex); 


function showDivs(n) { 
    $('html, body').animate({scrollTop: '0px'}, 800); 
    var i; 
    var x = document.getElementsByClassName("timeline"); 
    console.log("X value:"+x.length); 
    console.log("N value:"+n); 
    var dots = document.getElementsByClassName("demo"); 
    if (n > x.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 

    } 
    for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" btn-warning", ""); 
    } 
    x[slideIndex-1].style.display = "block"; 
    console.log("x Array:"+x[slideIndex-1].style.display); 
    dots[slideIndex-1].className += " "; 

} 

}); 

我面臨的一個問題是，如果點擊分類名（或）類別的進步它顯示卻ID = 0我已經得到父ID即1

Answer 1

您可以使用jQuery這個

$(".click").click(function(event){ 
    var parentId = $(event.currentTarget).closest('div.category-list').attr('id'); 
    console.log(parentId); 
    }); 

或

$(".click").click(function(event){ 
    var parentId = $(event.currentTarget).parent().attr('id'); 
    console.log(parentId); 
    }); 

只需將您的click選擇器添加到您的子div。

<div class="category-list demo" id="1" data-dismiss="modal"> 
    <div class="category-name click"> 
     technology 
    </div> 
    <div class="category-progress click"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
       <span class="sr-only">70% Complete</span> 
      </div> 
     </div> 

    </div> 
</div> 

Answer 2

，因爲當你點擊了technbology或70% Complete文本它不工作，該事件被捕捉target是「技術」和SpanElement中爲70% Complete DivElement都，所以當你嘗試獲得與德ID 'var id = e.target.id;'您不在具有您孩子身份的id屬性的元素中。

要解決這個問題，如果建議使用類category-list，例如因爲您想要獲取單擊列表中的id，則無需使用父級DivElement和click類。

更改爲QuerySelector '.category清單'：

document.querySelector('.category-list').addEventListener('click', 

變化即獲得德id屬性的方式：

使用jQuery：

var id = $(this).attr('id'); 

使用純JavaScript：

var id = this.getAttribute("id") 

你可以使用任何解決方案，jQuery或純JS。

完整的解決方案：

window.onload = function() { 

    document.querySelector('.category-list').addEventListener('click', function(e) { 

     var id=$(this).attr('id'); 
     var val=Number(id); 
     if(val===NaN){ 
     console.log(val); 

     } 
    else{ 
     currentDiv(val);  
      console.log("Number:"+val); 

    } 
    }); 
}; 
var slideIndex = 1; 
showDivs(slideIndex); 


function showDivs(n) { 
    $('html, body').animate({scrollTop: '0px'}, 800); 
    var i; 
    var x = document.getElementsByClassName("timeline"); 
    console.log("X value:"+x.length); 
    console.log("N value:"+n); 
    var dots = document.getElementsByClassName("demo"); 
    if (n > x.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 

    } 
    for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" btn-warning", ""); 
    } 
    x[slideIndex-1].style.display = "block"; 
    console.log("x Array:"+x[slideIndex-1].style.display); 
    dots[slideIndex-1].className += " "; 

} 

});