通过点击按钮设置和重置文本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"); 
    } 
});