jQuery的未來，父母，最接近

Question

HTML：

<div class="container"> 
    <ul> 
    <li class="item" id="id_1"> 
     <h2>header</h2> 
     <div class="c_image"> 
     <img/> 
     </div> 
    </li> 
    </ul> 
</div> 

上的圖像Click事件觸發，必須對相關H2 click事件。 html會自動呈現。

JS：

$(".container .item .c_image img").each(function(){ 
    $(this).click(function(){ 
    //console.log($(this).parent("li.item")); 
    $(this).closest("h2")[0].click(); 
    }); 
}); 

什麼是最好的解決辦法是這樣的情況， 我試圖接近，但它不會觸發H2 click事件。

這工作得很好：

$('#id_1 .c_image img').click(function(){ 
    $('li#id_1 h2')[0].click(); 
}); 

Answer 1

closest('h2')不會在這裏工作。你需要得到最接近li然後find()的h2：

$(".container .item .c_image img").click(function(){ 
    $(this).closest('li').find("h2").click(); 
}); 

請注意，您不需要遍歷img元素也是你能避免這個代碼的需要，如果你重視事件到li而不是h2，因爲事件將從img和h2兩者中冒泡。 「

Answer 2

h2元素是點擊圖像父的前一個兄弟。因此您可以使用.parent()以及.prev()選擇器

此外，您不需要逐個遍歷元素來爲它們附加相同的事件。您可以簡單地將事件綁定到返回的圖像對象。是這樣的：作爲h2是父母的img元素的同級

$(".container .item .c_image img").click(function(){ 
    $(this).parent().prev().click(); 
}); 

Answer 3

報價」圖片上的點擊事件必須觸發相關h2上的點擊事件。「 假設無論img還是標題被點擊，都必須發生相同的事件。

你能不能放在li click事件，而

$(".container li").on("click", function(){ 
    var $this = $(this); 
    var heading = $this.find('h2').html(); 
    console.log(heading); 
}); 

離不開的原因進一步瞭解建議比別人已經好？