通過點擊按鈕設置和重置文本jquery

Question

我的頁面有一些按鈕，例如按鈕「one」，按鈕「two」等。還有一個文本也包含「Set This」。

要求：

1. 當按鈕 「一個」 用戶點擊，

   （一）按鈕應該變爲暗背景色（選擇/激活狀態）

   （b）文本，「設置此」應根據單擊按鈕的文本更改爲文本。在這種情況下，「設置這個」將變更爲「組一個」

2. 當按鈕用戶點擊「一個」再次，

   （一）該按鈕應返回到它的以前的狀態（背景光版）

   （b）更改文本（ 「組一個 」）應復位並返回到默認狀態（「 設置此」）

其他按鈕的要求相同。我可以做出要求1和2（a）但我不能做2（b）。我怎麼做到的？

我的小提琴作品：http://jsfiddle.net/learner73/VFPLf/

$('.btn').click(function(){ 
    $(this).toggleClass("active"); 

    $('.changeText').text($(this).data("text")); 
}); 

Answer 1

如果我理解正確的問題，這可能會是你最好的選擇

$('.btn').click(function(){ 
    $(this).toggleClass("active");  
    if ($('.changeText').text() == $(this).data("text")) { 
     $('.changeText').text("This"); 
    } else{ 
     $('.changeText').text($(this).data("text")) 
    } 
}); 

JSFiddle

Answer 2

Fiddle Demo

$('.btn').click(function() { 
    var $this = $(this);//cache selector 
    $this.addClass('active').siblings().removeClass('active');//addClass to current element clicked and remove class from siblings 
    $('.changeText').text($this.data("text")); 
}); 

.siblings()

.addClass()

.removeClass()

Answer 3

是否這樣？

$('.btn').click(function(){ 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 

    $('.changeText').text($(this).data("text")); 
}); 

Answer 4

http://jsfiddle.net/prollygeek/Azw4t/2/

$('.btn').click(function() { 
    if(!$(this).hasClass('active')) 
     { 
    $(this).addClass('active').siblings().removeClass('active'); 
    $('.changeText').text($(this).data("text")); 
     } 
    else if($(this).hasClass('active')) 
    { 
     $(this).removeClass('active') 
     $('.changeText').text("This"); 
    } 
});