在我的页面上有一些按钮,即按钮"一",按钮"二"等。还有一个文本包含"设置这个"。
要求:
-
当用户点击"One"按钮时,
(a)按钮应变为深色背景色(已选/活动状态)
(b)文本,"Set this"应根据点击按钮的文本更改为文本。在本例中,"Set this"将改为"Set One"
-
当用户再次点击"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");
}
});