Jquery从列表中只选择一个图像

时间:2013-06-14 06:13:32

标签: jquery css

想要从以下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');

  });

});

...谢谢

4 个答案:

答案 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');
});

然后,在触发警报时重新启用

示例:http://jsfiddle.net/c7puz/

JS

// 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');
    }
});
祝你好运; - )