Javascript 如何在jQuery中按更改边框点击切换图像？

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

代码运行良好，但我尝试选择“取消选择”和“选择同一图像”时除外。我想通过单击选择其他图像

我试图检查

是否（$box==$（this））

但它不起作用。

解释 检查

$box

是否为单击的元素。如果是，只要隐藏它的边界（如果有）。否则，将边框放在单击的元素上

---

溶液（） JavaScript/JQuery 解释 检查

$box

是否为单击的元素。如果是，只要隐藏它的边界（如果有）。否则，将边框放在单击的元素上

---

溶液（） JavaScript/JQuery

---

您可以将数据属性添加到图像本身，而不是依赖于外部内容

$('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);
        }
    }
);

---

一个工作示例：

您可以向图像本身添加数据属性，而不必依赖外部内容

$('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);
        }
    }
);

---

工作示例：

更新-只能选择一个图像

方法使它变得如此简单-

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

---

更新-只能选择一个图像

方法使它变得如此简单-

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

---

为了回答您的问题，我将把所有图像放在一个容器中：

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

在CSS中：

#图像集>img{
边框：5px实心#fff；
}
#setOfImages>img.selected{
边框：5px纯绿色；
}

---

请参阅。

为了回答您的问题，我将把所有图像放在一个容器中：

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

在CSS中：

#图像集>img{
边框：5px实心#fff；
}
#setOfImages>img.selected{
边框：5px纯绿色；
}

---

请参阅。

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

---

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

---

存储所选状态（用于代码的其他部分）很重要吗？还是只想切换边框的样式？是的，我需要为其他控件存储空状态（未选择任何控件）。确定，您是说在一组图像中，只能选择1个？是的，只有一个或没有一个（选择然后取消选择）选择存储选定状态（用于代码的其他部分）很重要，还是只想切换边框的样式？是的，我需要为其他控件存储空状态（未选择任何控件）。确定，您是说在一组图像中，只能选择1个？是的，只有一个或没有一个（选择然后取消选择）选择的不完全满足要求不完全满足要求不完全满足要求不完全满足要求不完全满足要求谢谢！如果（$this.hasClass（'active'））对其他控件也很有用，谢谢！if（$this.hasClass（'active'））也可用于其他控件