Question

我的html代码：如果我点击demo类中的任何子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 += " ";

}

});

我面临的一个问题是，如果点击category-name（或）category-progress，它显示的是id = 0，但我得到了父ID，即。

Answer 1

您可以将Jquery用于此

MID(CSTR({yourstringhere}), 4)

或

  $(".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); });选择器添加到您的子div。

click

Answer 2

它不起作用，因为当您点击technbology或70% Complete文本时，该事件捕获的target是'技术'的DivElement和{{1的} SpanElement ，所以当你尝试使用'var id = e.target.id;'获取de ID时你不是在你孩子的id属性的元素中的位置。

要解决此问题，如果建议使用类70% Complete，则不必将父DivElement与类click一起使用，因为您希望获取列表中单击的ID。 / p>

更改“.category-list”的category-list：

QuerySelector

更改获取de id属性的方式：

使用jQuery：

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

使用纯Javascript：

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

您可以使用任何解决方案，jQuery或Pure JS。

完整的解决方案：

var id = this.getAttribute("id")

当我点击任何子div时，我必须触发父div？

2 个答案: