Ich muss Eltern Div auslösen, wenn ich auf ein Kind div klicke?

Question

Mein HTML-Code: Wenn ich auf ein untergeordnetes div innerhalb der Demo-Klasse klicke, hat es die Eltern-ID des Auslösers, d. H. (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 Code:

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 += " "; 

} 

}); 

i vor einem Problem, dass, wenn Klick auf Kategorie-Namen (oder) Kategorie-progress es id = 0 zeigt, aber ich Eltern bekommen haben id dh 1.

Answer 1

können Sie Jquery verwenden für diese

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

oder

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

und fügen Sie einfach Ihre click Selektor zu Ihrem Kind divs.

<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

Es weil funktioniert nicht, wenn Sie über technbology oder 70% Complete Text klicken, wird die target, die das Ereignis ein DivElement für ‚Technologie‘ ist ansteckend und SpanElement- für 70% Complete, so dass, wenn Sie versuchen, mit de-ID zu erhalten 'var id = e.target.id;' Sie befinden sich nicht in dem Element mit dem ID-Attribut, das Sie in ihrem Kind haben.

Um dies zu beheben, müssen Sie nicht das übergeordnete DivElement mit der Klasse click verwenden, wenn die Verwendung der Klasse category-list empfohlen wird, weil Sie beispielsweise die IDs erhalten möchten, auf die Sie in die Liste klicken.

Ändern der QuerySelector für '.category-Liste':

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

ändern die Art und Weise, die de id-Attribut erhalten:

Mit jQuery:

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

mit reinem Javascript:

var id = this.getAttribute("id") 

Sie können jede Lösung, jQuery oder Pure JS verwenden.

Die Komplettlösung:

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 += " "; 

} 

});