如何在jQuery中通過更改邊框切換圖像？

Question

我試圖通過this code

var $box=null; 

$('img') 
    .click(function() { 
     if ($box == null) { 
      $box = $(this); 
      $box.css("border","5px solid green"); 
     } else { 
      $box.css("border","5px solid white"); 
      $box = null; 
     } 
    } 
); 

代碼，使通過單擊更改邊框顏色選擇 - 取消選擇圖像除了當我嘗試選擇，取消選擇和選擇相同的圖像是工作的罰款。我想通過一次點擊選擇其他圖像。

我試圖檢查if ($box == $(this))但它不起作用。

Answer 1

改爲使用類，並在需要時切換類。該解決方案就像一個單選按鈕（在一次邊境只有一個圖像），但允許您取消活動圖像，以及：

http://jsfiddle.net/6cGVz/

$('img').click(function() { 
    var $this = $(this); 
    if ($this.hasClass('active')) { 
     $this.removeClass('active'); 
    } else { 
     $('.active').removeClass('active'); 
     $this.addClass('active'); 
    } 
}); 

Answer 2

說明

檢查$box是點擊的元素與否。如果是的話，只要隱藏它的邊界就可以了。否則，將邊框放在單擊的元素上！

---

解決方案（Live Demo）

的JavaScript/JQuery的

var $box=null; 

$('img') 
    .click(function() { 
     if ($box == null) { 
      $box = $(this); 
      $box.css("border","5px solid green"); 
     } else { 
      $box.css("border","5px solid white"); 
      if($box != $(this)) 
      { 
       $box = $(this); 
       $box.css("border","5px solid green"); 
      } 
      else 
       $box = null; 
     } 
    } 
); 

Answer 3

您可以將數據屬性添加到圖像本身，而不是依賴於外在的東西。

$('img') 
    .click(function() { 
     var img = $(this); 
     if (! img.data('box')) { 
      img.css("border","5px solid green"); 
      img.data('box', true); 
     } else { 
      img.css("border","5px solid white"); 
      img.data('box', false); 
     } 
    } 
); 

工作示例：http://codepen.io/paulroub/pen/qbztj

Answer 4

更新 - 只有一個圖像可以被選擇

toggleClass of jQuery方法做起來很簡單 -

使用JS -

用CSS -

.selected{ 
    border:5px solid green; 
} 

Demo

Answer 5

對於你的問題而言，我會把所有的圖像在一個容器：

<div id='setOfImages'> 
    <img ... > 
    <img ... > 
    <img ... > 
    <img ... > 
</div> 

切換的一類。

$('#setOfImages > img').click(function() { 
    'use strict'; 

    if($(this).hasClass('selected')) { 
     // Deselect currently selected image 
     $(this).removeClass('selected'); 
    } else { 
     // Deselect others and select this one 
     $('#setOfImages > img').removeClass('selected'); 
     $(this).addClass('selected'); 
    } 
}); 

而在你的CSS：

#setOfImages > img { 
    border: 5px solid #fff; 
} 

#setOfImages > img.selected { 
    border: 5px solid green; 
} 

見jsFiddle demo。