当我点击任何子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 += " "; 

} 

});