javascript - 我必须在单击任何子 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>

j查询代码:

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>