如何在jQuery中通过更改边框切换图像？

Question

我试图通过this code

点击更改边框颜色来制作选择取消选择图像

var $box=null;

$('img')
    .click(function() {
        if ($box == null) {
            $box = $(this);
            $box.css("border","5px solid green");
        } else  {
            $box.css("border","5px solid white");
            $box = null;
        }
    }
);

代码工作正常，除非我尝试选择 - 取消选择并选择相同的图像。我想一键选择其他图像。

我尝试检查if ($box == $(this))，但它不起作用。

Answer 1

改为使用类，并在需要时切换类。此解决方案就像一个单选按钮（一次只有一个带边框的图像），但也允许您取消选择活动图像：

http://jsfiddle.net/6cGVz/

$('img').click(function() {
    var $this = $(this);
    if ($this.hasClass('active')) {
        $this.removeClass('active');
    } else {
        $('.active').removeClass('active');
        $this.addClass('active');
    }
});

Answer 2

解释

检查$box是否是被点击的元素。如果是，只要隐藏边框即可。否则，将边框放在单击的元素上！

---

解决方案（Live Demo）

的JavaScript / JQuery的

var $box=null;

$('img')
    .click(function() {
        if ($box == null) {
            $box = $(this);
            $box.css("border","5px solid green");
        } else  {
            $box.css("border","5px solid white");
            if($box != $(this))
            {
                $box = $(this);
                $box.css("border","5px solid green");
            }
            else
                $box = null;
        }
    }
);

Answer 3

更新 - 只能选择一个图片

toggleClass of jQuery方法让它变得如此简单 -

使用Js -

$('img').click(function() {

    if ($(this).hasClass("selected")) {
        $("img.selected").removeClass("selected");
    } else {
        $("img.selected").removeClass("selected");
        $(this).addClass("selected");
    }

});

用css -

.selected{
    border:5px solid green;
 }

Demo

Answer 4

出于问题的目的，我会将所有图像放在一个容器中：

<div id='setOfImages'>
    <img ... >
    <img ... >
    <img ... >
    <img ... >
</div>

切换课程。

$('#setOfImages > img').click(function() {
    'use strict';

    if($(this).hasClass('selected')) {
        // Deselect currently selected image
        $(this).removeClass('selected');
    } else {
        // Deselect others and select this one
        $('#setOfImages > img').removeClass('selected');
        $(this).addClass('selected');
    }
});

在你的CSS中：

#setOfImages > img {
    border: 5px solid #fff;
}

#setOfImages > img.selected {
    border: 5px solid green;
}

请参阅jsFiddle demo。

Answer 5

您可以向图像本身添加数据属性，而不是依赖于外部的东西。

$('img')
    .click(function() {
        var img = $(this);
        if (! img.data('box')) {
            img.css("border","5px solid green");
            img.data('box', true);
        } else  {
            img.css("border","5px solid white");
            img.data('box', false);
        }
    }
);

一个工作示例：http://codepen.io/paulroub/pen/qbztj