想要从以下jsbin链接代码中一次只选择一个图像
http://jsbin.com/avaxay/1/edit
代码:
$(function() {
$("img").click(function() {
$("img").not(this).removeClass("hover");
$(this).toggleClass("hover");
});
$("#btn").click(function() {
var imgs = $("img.hover").length;
alert('there are ' + imgs + ' images selected');
});
});
...谢谢
答案 0 :(得分:3)
您可以使用以下代码:
$("img").click(function() {
$("img").not(this).removeClass("hover");
$(this).toggleClass("hover");
});
它从所有图像中删除hover
类(除了使用not
方法删除的当前值)并切换当前类的类。
更新了jsbin:http://jsbin.com/avaxay/36/edit
答案 1 :(得分:1)
$("img").click(function() {
$('ul > li > img').removeClass("hover);
$(this).addClass("hover");
});
答案 2 :(得分:1)
$("img").click(function() {
$("img.hover").attr('class', '');
$(this).toggleClass("hover");
});
我希望这是你的预期
答案 3 :(得分:0)
您可以使用jQuery.one()功能或jQuery.off()
我认为这里最好的解决方案可能是使用jQuery.off('click')
$("img").click(function(){
$("img").off('click');
});
然后,在触发警报时重新启用
// function to do something when the click is trigger
function enableSelect(){
$("img").click(function(){
$(this).toggleClass("hover");
// toggle off the click, so only first one will work,
// until the function is called again
$("img").off('click');
});
}enableSelect();
$("#btn").click(function(){
var pos = $("img.hover").parent().index();
if(pos > -1){
// tell us the selected image to work with
alert('The selected image is at position: ' + pos );
// clear the hover state
$("img").removeClass("hover");
// and enable the click again
enableSelect();
} else {
alert('no image selected');
}
});
祝你好运; - )