我有一个按钮,当页面加载其他两个非活动按钮时,需要激活该按钮。单击非活动按钮时,我需要从另一个按钮中删除活动类并将其添加到单击的按钮。
$("button").click(function () {
clicked = true;
if (clicked) {
$(this).toggleClass('active');
clicked = true;
} else {
$(this).removeClass('active');
clicked = false;
}
});
.featuredBtn.active {
background-color: #bf9471;
color: white;
}
.featuredBtn {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
单击新按钮时,应删除具有.active类的按钮。然后,新单击的按钮应该使用.active类。
代码无法正常工作,因为(clicked)
将始终为true - 每次函数运行时,对于每个按钮,它都设置为true。如果要检查单击的按钮是否处于活动状态,可以设置变量clicked = this.getAttribute('class').includes('active')
。如果按钮具有active
类,则clicked
将为真。
但是,我们甚至不需要检查单击按钮是否处于活动状态 - 我们可以从所有按钮中删除active
类,然后将其设置为使用$(this)
选择器刚刚单击的任何一个,如下所示:
$("button").click(function() {
$("button").removeClass("active");
$(this).addClass("active");
});
.featuredBtn.active {
background-color: #bf9471;
color: white;
}
.featuredBtn {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
我建议使用类名“featuredBtn”更精确地指定元素。这样可以避免在页面上的所有按钮上绑定事件
$(".featuredBtn").click(function() {
$("button.active").removeClass("active");
$(this).addClass("active");
});
我希望这可以解决你的工作检查;不得不只是add
和remove
类
$("button").click(function() {
$("button").removeClass("active");
$(this).addClass("active");
});
.featuredBtn.active {
background-color: #bf9471;
color: white;
}
.featuredBtn {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
希望它有助于解决您的问题
我要添加到这些中的唯一额外的东西是首先检查类active
。其他一切主要是个人风味,因为有几种方法可以做到这一点,这里的答案似乎涵盖了它
$('.featuredBtn').on('click', function() {
let featureBtn = $('.featuredBtn');
if(featureBtn.hasClass('active')) {
featureBtn.removeClass('active');
$(this).addClass('active');
}
});
您可以使用'hasClass'来解决这个问题。
$("button").click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
} else {
$(".active").removeClass("active");
$(this).addClass('active');
}
});
.featuredBtn.active {
background-color: #bf9471;
color: white;
}
.featuredBtn {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>