Question

我的页面上有一些按钮，即按钮“一个”，按钮“两个”等。还有一个文本也包含“设置此项”。

要求：

当用户点击“一个”按钮时，

（a）按钮应转为深色背景色（选定/活动状态）

（b）文字，“设置此”应根据点击按钮的文字更改为文字。在这种情况下，“设置此项”将更改为“设置一个”
当用户再次点击“一个”按钮时，

（a）按钮应返回到之前的状态（浅色背景版本）

（b）更改的文字（“设置一个”）应重置并返回默认状态（“设置此”）

其他按钮的要求相同。我可以提出要求1和2（a）但我不能做2（b）。我该怎么做？

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

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

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

Answer 1

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 2

喜欢这个吗？

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

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

Answer 3

如果我正确理解问题，这可能是你最好的选择

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

JSFiddle

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");
    }
});

单击按钮jquery设置和重置文本

4 个答案: