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

上下文

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

现在可以选择许多图像：

我想要帮助选择和取消选择单个图像。

我的代码

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

更新：我想选择图片的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

或者你可以试试这样的：

JS：

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

这是小提琴更新。