javascript - 如何通过在jQuery中更改边框来切换点击图像？

Question

我正在尝试通过单击此代码更改边框颜色来制作选择取消选择图像

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是被点击的元素。如果是，只要有边框就隐藏它。否则，将边框放在单击的元素上！

---

解决方案（现场演示）

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

更新 - 只能选择一张图片

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

使用 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;
 }

演示

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 演示。

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