javascript - 在图像的边框之间切换并删除其他现有图像的边框

Question

语境

我只想选择一个图像并删除其他现有图像的边框

现在可以像这样选择许多图像：

我需要有关选择和取消选择单个图像的帮助。

我的代码

function clickpick(item) {

    for ( var i = 5; i < document.images.length; i++) {
        
        document.images[i].onclick = function() {
        
        if (this.style.borderWidth == '5px') {
            selectpic = '';
            $("#display-frame").find("*").css("border", "0");
        } else {
            this.style.border = '5px solid blue';
            selectpic = $(item).attr("url");
        }

    };
}

图像是自动生成的

html

<div class="mainpic"><img src="';path+=file.filepath+'" class="uploader-thumb-img" style="width: 108px; height: 120px; top: 0px; left: 0px; "/></div>

更新：我想选择图片的 url 抱歉忘了提

Answer 1

解决方案

使用 jQuery.toggleClass()函数。

CSS：

img { border: 0; }
img.highlight { border: 5px solid blue; }

JavaScript：

var url;

$('img').click(function (e) {
    $('img.highlight').not(e.target).removeClass('highlight');
    $(this).toggleClass('highlight');
    url = $(this).attr('href');
});​

演示

http://jsfiddle.net/7FAjD/2

Answer 2

如果您想一次只选择一张图片，您可以尝试以下操作：

var $images = $('img');

$images.click(function () {
    $images.removeClass('highlight');
    $(this).addClass('highlight');
});

Answer 3

或者你可以试试这样的：

<img src="http://www.placehold.it/200x200&text=5" onclick="clickpick(this)" />

JS：

function clickpick(item) {

        if (item.style.borderWidth == '5px') {
            item.style.border = '2px solid red';
        } else {
            item.style.border = '5px solid blue';
        }

}

这是更新的小提琴。