點擊Div級別時，提醒它是內部內容的Div級別

Question

我怎麼把這些，讓我試試。在下面的代碼集中，我想單擊'parentclass'並且具有'child1'的警報值，並且當我點擊它下面的'Parent 2'類的值爲'child2'的警報火時

因此，這必須只提醒該類的內容，而不是整個類。

這是jquery中的一些Javascript。

var childclass = $('.childclass').html(); 
$('.parentclass').click(function(e) { 
    alert (childclass) 
}); 
$('.childclass').click(function(e) { 
    e.stopPropagation() 
    e.preventDefault() 
}); 

和HTML

<a href="" onClick="return false"> 
    <div class='parentclass'> 
     Parent 1 
    <div style="display:none" class="childclass">child1</div> 
    </div> 
</a> 
<a href="" onClick="return false"> 
    <div class='parentclass'> 
     Parent 2 
    <div style="display:none" class="childclass">child2</div> 
</div> 
</a> 

Answer 1

此行var childclass = $('.childclass').html();犯規化妝因爲它不知道哪個元素尤其如此你意思是。其結果將只是child1child2，這只是所有元素的.html()級聯childclass的串聯。這顯然不是你想要的。

因此，您應該在收到點擊事件後動態查找類別爲childclass的孩子。

$('.parentclass').click(function(e) { 
    alert($(this).find('.childclass').html()) 
}); 

此外，您應該知道您的子類事件處理程序是無用的，因爲我們不關心事件是否向下傳播。如果你關心，那麼你的e.stopPropagation()和e.preventDefault()應該在父類的事件處理程序中。

Answer 2

您需要單擊處理程序

$('.parentclass').click(function (e) { 
    alert($(this).find('.childclass').html()) 
}); 
$('.childclass').click(function (e) { 
    e.stopPropagation() 
    e.preventDefault() 
}); 

演示中獲取點擊的父元素的HTML：Fiddle

Answer 3

有幾種方法可以解決這個問題。

首先，如果你的HTML不會是動態的（已經存在的元素時，頁面加載），那麼你可以選擇由父類名稱的元素，並指定click事件像這樣：

$('.parentclass').click(function(e) { 
    // the first variable here is selecting the inner elements having class 'childclass' 
    // keep in mind, if more than one child having that class is present within this parent, it will select all of them 
    var child = $(this).find('.childclass'); 
    // here we alert the text of the inner child found 
    //  if it is more than one, you will have undesired results. you may want to specify `.first()` 
    alert(child.text()) 
}) 

對於較新的jQuery的你也可以使用$('.parentclass').on('click', function(e) {。

---

如果你希望的任何parentclass件是動態的，那麼你要委託基於一個靜態父母的父母或document事件。這可以是像這樣：

$(document).on('click', '.parentclass', function(e) { 
    alert($(this).find('.childclass').text()) 
}) 

或者，如果你有一個靜態的（已經在那裏當頁面加載）包裝元素，給它像`parentClassWrapper」的ID和動態地分配click事件：

$('#parentClassWrapper').on('click', '.parentclass', function(e) { 
    alert($(this).find('.childclass').text()) 
}) 

---

一些有用的鏈接：

• jQuery API
• jQuery Selectors
• .click()
• .on()

• Some info on Event Delegation

• jquery on vs click methods

• jQuery .on('click') vs. .click() and .delegate('click')
• jquery .live('click') vs .click()

Answer 4

我對你的html做了一些值得注意的調整。不需要<a>標籤。不要在你的html中使用內聯js - onlick。請注意，我將<a>標籤中的div文本封裝在其中。這個標記更具語義。另外，將你的樣式移動到CSS而不是在html中。

<div class="parent"> 
    <a>Parent 1</a> 
    <a class="child">child of parent 1 contents</a> 
    </div> 
    <div class="parent"> 
    <a>Parent 2</a> 
    <a class="child">child of parent 2 contents</a> 
</div> 

CSS：

.parent > .child { /* good practice: only select an immediate child of the parent */ 
    display: none; 
} 

其他的答案在這裏使用find()選擇孩子，但我建議children()代替。例如，如果你有額外的嵌套.child S，find()將其全部選中，但children()將只選擇直接.child S中的父母的，所以在這種情況下更好。我還建議使用控制檯進行調試，而不是alert。

Live demo here (click).

$('.parent').click(function() { 
    var $child = $(this).children('.child'); 
    var cls = $child.attr('class'); 
    console.log(cls); 
    $child.show(); //added so that you can click the child 
}); 

$('.child').click(function() { 
    var html = $(this).html(); 
    console.log(html); 
    //if you just want the text, use this instead: 
    var text = $(this).text(); 
    console.log(text); 
});