.click没有注册更改的类

Question

我正在尝试创建一个脚本，它将更改另一个元素的类以避免在新类下激活脚本，但是，它没有向脚本注册，脚本会考虑老班还在那里。

<script> 
$(document).ready(function(){ 
$(".element1").click(function(){ 
    $(".element1").addClass("clicked"); 
    $(".element1").removeClass("element1"); 
});}); 
</script> 

当前代码是以上我正在尝试实现。

Answer 1

试试这个，你可以通过使用特定元素的onclick来实现它。这里点击监听器在点击时绑定到文档中的“.element1”。

，如果你想执行一个click事件只有一次，那么你也可以使用.one()

$(".element1").one("click",function(){ 
    <!-- your code here --> 
}); 

$(document).ready(function() { 
 
    $(document).on("click", ".element1", function() { 
 
    console.log("click"); 
 
    $(".element1").addClass("clicked"); 
 
    $(".element1").removeClass("element1"); 
 
    }); 
 
});

.element1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
} 
 
.clicked { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="div1" class="element1"></div>

Answer 2

不喜欢这里这

$(document).ready(function() { 
    $(".element1").click(function() { 
    $(this).addClass("clicked").removeClass("element1"); 
    }); 
}); 

注jquery method-chaining用来。你不需要选择元素多的时间来添加方法将其

Answer 3

我的解决方案是：在div

看到一个（点击），关（），上（）;在：

http://www.w3schools.com/jquery/event_one.asp

http://www.w3schools.com/jquery/event_on.asp

http://www.w3schools.com/jquery/event_off.asp

$(document).ready(function(){ 
 
$(".element1").one("click", function() { 
 
    console.log("is clicked"); 
 
    $(".element1").addClass("clicked").removeClass("element1"); 
 
}); 
 
});

.element1{ 
 
background-color:red; 
 
} 
 
.clicked{ 
 
background-color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="element1">hola</div>

Answer 4

具有类element1被绑定到的点击的元件（一个或多个）加载处理程序...

即使您从中删除类，它仍然绑定到事件处理程序。
正如你可以看到下面：

$(document).ready(function(){ 
 
    $(".element1").click(function(){ 
 
     console.log("click"); 
 
     $(".element1").addClass("clicked"); 
 
     $(".element1").removeClass("element1"); 
 
    }); 
 
});

.element1{ 
 
    color:blue; 
 
} 
 
.clicked{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element1">element 1</div>

我建议你使用off()这样的：
感谢Dashtinejad为mentionning该.unbind()被弃用的jQuery 3.0 ...工程一样。

$(document).ready(function(){ 
 
    $(".element1").click(function(){ 
 
     console.log("click"); 
 
     $(this).off("click").addClass("clicked").removeClass("element1"); 
 

 
    }); 
 
});

.element1{ 
 
    color:blue; 
 
} 
 
.clicked{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element1">Element 1</div>

而且使用链接...
;）