子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

あなたはこの

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

または

のためのjQueryを使用することができます

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

あなたの子divにclickセレクタを追加するだけです。

それは動作しません

<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は70% Completeのための技術 'とのSpanElementのためDivElementですので、あなたがしてデIDを取得しようとすると、 'var id = e.target.id;'子要素にあるid属性を持つ要素には配置されません。

これを修正するには、クラスcategory-listを使用することが推奨されている場合、クラスclickの親DivElementを使用する必要はありません。たとえば、リスト内のどこかのIDを取得したいからです。

変更] .categoryリスト」のQuerySelector：jQueryを使って

：

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

変更デid属性を取得する方法

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

ピュアJavaScriptで：

var id = this.getAttribute("id") 

任意のソリューション、jQueryまたはPure 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 += " "; 

} 

});