兩個選擇器上單擊事件來更改按鈕文字

Question

我有一個使用dl，dt的FAQ腳本。 DD：

$('.faqs dd').hide(); // Hide all DDs inside .faqs 
$('.faqs dt').hover(function(){ 
    $(this).addClass('hover' , 'slow')},function(){ 
     $(this).removeClass('hover' , 'slow')}).click(function(){ 
     // Add class "hover" on dt when hover 
     $(this).next().slideToggle('normal'); // Toggle dd when the respective dt is clicked 
    }); 

的HTML如下：

<dl class="faqs"> 
    <dt>question 1 <button class="btn btn-primary btn-xs pushme">open answer</button></dt> 
    <dd>answer 1</dd> 
</dl> 

雖然一下問題打開我想添加按鈕答案。 （因爲問題很長，我不確定用戶會知道他/她需要點擊問題）。

我想要做的是將按鈕文本從'打開'更改爲'關閉'，根據dd的狀態或按鈕類和dt共享的單擊事件。 我試着：

$('.faqs dt, .pushme').click(function() { 
    $('.pushme').text(function(i, v){ 
     return v === 'open' ? 'close' : 'open' 
    }) 
}); 

但僅在第一選擇器（.facs DT） 我也試着檢查所述dd表示顯示的起作用：無/塊和以.html改變按鈕（ ）但那沒有爲我工作。

有人嗎？

Answer 1

您需要爲目標的pushme元素，這就是當前的常見問題解答裏，所以儘量

$('.faqs dd').hide(); // Hide all DDs inside .faqs 
$('.faqs dt').hover(function() { 
    $(this).addClass('hover', 'slow') 
}, function() { 
    $(this).removeClass('hover', 'slow') 
}).click(function() { 
    $(this).next().stop(true, true).slideToggle('normal'); 
    $(this).find('.pushme').text(function (_, text) { 
     return text == 'open answer' ? 'close answer' : 'open answer' 
    }) 
}); 

演示：Fiddle