切換

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