jquery - 只有点击的 div 应该有不同的颜色

Question

我有 4 个 div，我只希望单击的 div 更改边框颜色，但如果单击另一个，它会变回来。目前点击后颜色保持不变：

jsfiddle

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

JS

$('.box').on('click', function(e){
 e.preventDefault();
$(this).css('border-color', 'lime');
});

Answer 1

$('.box').on('click', function(e){
 e.preventDefault();
$('.box').css('border-color','');
$(this).css('border-color', 'lime');
});

Answer 2

您可以从所有元素中删除 css 样式，并在每次单击时将其重新分配给当前元素。这很简单，但我更喜欢使用两个变量来保存当前元素和前一个元素对象，如下所示：

var cur;  //represents current element
var pre;  //represents previous element

$('.box').on('click', function (e) {
    e.preventDefault();
    if (pre) //checking for first time condition
        pre.css('border-color', 'red');  
    cur = $(this);
    cur.css('border-color', 'lime');
    pre = cur;  //assigning the current element to previous element
});

工作小提琴

JSPERF

Answer 3

使用类的链接示例。

$(".box").click(function() {
   $(this).addClass("active").siblings('.box').removeClass("active"); 
});

http://jsfiddle.net/CkwQU/13/

Answer 4

试试这个：现场演示（阅读评论）

$('.box').on('click', function(e){
  $('.box').css('border-color', 'red');//set all borders value to the default
  e.preventDefault();
  $(this).css('border-color', 'lime');//change the selected border value
});

Answer 5

尝试这个

$(".box").click(function() {
   $(".box").removeClass("active");  // remove active class from all
   $(this).addClass("active");         // add active class to clicked
});

演示

Answer 6

像这样试试

$('.box').on('click', function(e){
$('.box').css({'border-color':'blue','border':'solid 1px red'});
$(this).css('border-color', 'lime');
});

看演示

Answer 7

这是我认为的正确方式

$('.box').on('click', function(e){
    e.preventDefault();
  // Lime color
  if($(this).css('border-left-color') == 'rgb(0, 255, 0)')
  {
   $(this).css('border-color', 'red'); 
  }
  else
  {
    $(this).css('border-color', 'lime');
  }
});

Answer 8

在设置新的边框颜色之前，您只需要设置所有框的边框颜色：

$('.box').on('click', function(e){
 e.preventDefault();
$('.box').css('border-color', 'black');
$(this).css('border-color', 'lime');
});

Answer 9

您可以使用以下代码执行此操作。

CSS：

div.box{
    width:100px;
    height:30px;
    background:#ccc;
    margin:3px;


}

.box.border{
    border:1px solid #ff0000;
}

JS：

$(".box").on("click", function () {
    if (!$(this).hasClass("border")) {
        $(".border").removeClass("border");
        $(this).addClass('border');
    }
});

演示在这里 - http://jsfiddle.net/cb7mH/

Answer 10

您需要重置所有其他 div 的边框。

  $('.box').css('border-color', 'red');

更新了你的小提琴..