对于这个问题,我已经用最简单的术语来说明了。
如果单击元素,则将 'active' 类添加到元素,从其他元素中删除 'active' 类。
但是,如果元素是“活动的”并且第二次单击它,则不应“重新应用”(或第二次调用)“活动”类。
$(".class").click(function(){
$('.class').not(this).removeClass('active');
$(this).addClass('active');
}
例如,当单击按钮 1 并具有“活动”类 -> doFunction;
if ( $(".active").is("#1") ) {
doFunction();
}
当再次单击它时,即使该元素已经处于“活动状态”,该函数也会再次触发。如果该元素处于活动状态并再次单击,我不想再次调用这些函数。我怎样才能做到这一点?
Codepen 示例:https ://codepen.io/anon/pen/yvZXOB ? editors = 1111
谢谢!
由于您没有具体指定如何限制函数被调用,让我们看看两种可能性。
第一种可能性:您可以单击每个按钮以激活并最多调用一次某些功能。之后,切换按钮将切换类,但不会再次调用其他函数。
在这种情况下,您可以使用 jQuery 的.one()
.
$(".class").one('click', function(){
$('.class').not(this).removeClass('active');
$(this).addClass('active');
if ( $(".active").is("#1") ) {
doFunction();
}
if ( $(".active").is("#2") ) {
doFunction();
}
function doFunction() {
console.log("function fired!");
}
});
.class {
padding: 10px;
border-radius: 5px;
background: #392;
width: 100px;
color: white;
text-align: center;
margin: 25px;
display: inline-block;
cursor: pointer;
}
.active {
background: #932;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class" id="1">
button
</div>
<div class="class" id="2">
another
</div>
第二种可能性:当您在按钮之间单击时,会切换活动状态,但单击已经处于活动状态的按钮不会继续运行其他功能。但是,从按钮切换回按钮将允许该按钮的功能再次运行。
在这种情况下,您可以通过变量设置某种标志,然后检查标志以查看是否允许您再次运行其他函数。函数运行,标志上升。单击不同的按钮,标志返回。
var preventFunction;
$(".class").on('click', function(){
if($(this).hasClass('active')) {
preventFunction = true;
} else {
preventFunction = false;
}
$('.class').not(this).removeClass('active');
$(this).addClass('active');
if ( $(".active").is("#1") ) {
if(preventFunction !== true) {
doFunctionOne();
}
}
if ( $(".active").is("#2") ) {
if(preventFunction !== true) {
doFunctionTwo();
}
}
});
function doFunctionOne() {
console.log("function one fired!");
preventFunctiong = true;
}
function doFunctionTwo() {
console.log("function two fired!");
preventFunction = true;
}
.class {
padding: 10px;
border-radius: 5px;
background: #392;
width: 100px;
color: white;
text-align: center;
margin: 25px;
display: inline-block;
cursor: pointer;
}
.active {
background: #932;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class" id="1">
button
</div>
<div class="class" id="2">
another
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句