如何在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。