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

Set and reset text by clicking button jquery

本文关键字：按钮 jquery 置文本 设置      更新时间：2023-09-26

在我的页面上有一些按钮，即按钮"一"，按钮"二"等。还有一个文本包含"设置这个"。

要求:

  1. 当用户点击"One"按钮时，

    (a)按钮应变为深色背景色(已选/活动状态)

    (b)文本，"Set this"应根据点击按钮的文本更改为文本。在本例中，"Set this"将改为"Set One"

  2. 当用户再次点击"One"按钮时，

    (a)按钮应该返回到它之前的状态(浅色背景版本)

    (b)更改的文本("Set One")应重置并返回到默认状态("Set This")

其他按钮要求相同。我可以满足条件1和2(a)但不能满足条件2(b)我怎样才能做到呢?

My fiddle Work: http://jsfiddle.net/learner73/VFPLf/

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

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

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

JSFiddle

小提琴演示 

$('.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 ()

像这样?

$('.btn').click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
    $('.changeText').text($(this).data("text"));
});

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");
    }
});
相关文章：