切换

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

或者你可以尝试一些像这样：

个

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