толькі пстрыкнуў DIV будзе мець розны колер

У мяне ёсць 4 дзіў, я толькі хачу, каб пстрыкнулі справы да змяніць колер мяжы, але калі іншы націснутая яна павінна змяніць назад. На дадзены момант колер застаецца пасля пстрычкі:

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');
});
1
вы павінны глядзець на перавагі прадукцыйнасці счаплення тут. jsperf.com/simple-chaining-test
дададзена аўтар Blowsie, крыніца

10 адказы

Вы можаце выдаліць стыль 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
});

<�моцны> Працоўная Fiddle

<�моцны> JSPerf

2
дададзена
$('.box').on('click', function(e){
 e.preventDefault();
$('.box').css('border-color','');
$(this).css('border-color', 'lime');
});
2
дададзена

Паспрабуйце гэта: <�моцны> Жывы DEMO (Чытаць камэнтары)

$('.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
});
1
дададзена

Паспрабуйце, як гэта

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

Глядзі Дэманстрацыйны

1
дададзена

паспрабуйце гэта

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

<�Моцны> DEMO

1
дададзена
@Blowsie jsperf.com/two-clickes (я спадзяюся, што я зрабіў гэта правільна)
дададзена аўтар Mr_Green, крыніца
@Blowsie так, ён стане больш хутчэй, калі ёсць больш элементаў. :).
дададзена аўтар Mr_Green, крыніца
Вы павінны зірнуць на мой адказ, счапленне мае некаторыя вялікія перавагі ў прадукцыйнасці. jsperf.com/simple-chaining-test
дададзена аўтар Blowsie, крыніца
@Mr_Green не, не зусім так, вы не можаце эмуляваць прадукцыйнасць .click() , таму я змяніў міну .each() Ваш код яшчэ хутчэй думаў не так шмат , і, магчыма, больш цяжкім для пачаткоўца, каб зразумець. jsperf.com/two-clickes/2
дададзена аўтар Blowsie, крыніца
@Mr_Green я згодны, экспанентна
дададзена аўтар Blowsie, крыніца

Прыкаваны прыклад з выкарыстаннем класаў.

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

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

1
дададзена

Вам трэба скінуць межы ўсіх астатніх дзівы.

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

Былі абноўленыя вы пагуляцца ..

1
дададзена
выдатна; дзякуй за рэдагаванне! Я выдаліў каментары.
дададзена аўтар Andrew Barber, крыніца

Вам проста трэба ўсталяваць колер межы ўсіх каробак, перш чым ўсталяваць новы колер рамкі:

$('.box').on('click', function(e){
 e.preventDefault();
$('.box').css('border-color', 'black');
$(this).css('border-color', 'lime');
});
0
дададзена

Вы можаце зрабіць гэта з дапамогай наступнага кода.

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

Demo here - http://jsfiddle.net/cb7mH/

0
дададзена
yea..had стварыў гэтую скрыпку для іншага question..Will рэдагаваць яго зараз ..
дададзена аўтар user700284, крыніца
Было б нядрэнна, каб прызначацца .box
дададзена аўтар Blowsie, крыніца

Гэта правільны шлях я думаю

$('.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');
  }
});
0
дададзена