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

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>

更新： 我想选择图片的网址抱歉忘记提及

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

或者你可以试试这样的：

<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';
        }

}

这是fiddle已更新。

Answer 3

如果您想同时只选择一个图像，可以尝试以下方法：

var $images = $('img');

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