使用jquery更改div的顏色以匹配另一個div

我目前總共有4個相同類的方框，並且每個方框都有自己的ID，當單擊任何方框時，所有方框的背景顏色應更改爲分配的分區ID。使用jquery更改div的顏色以匹配另一個div

我確實想讓它成爲當前JS小提琴示例中的特定顏色，我希望它能成爲特定div的顏色。即＃box2將改變.click上的顏色爲＃box1的顏色，並且＃box1將改變爲＃box4的顏色。從而給出了順時針方向移動的錯覺。我希望這可用於無限次點擊。

 $(document).ready(function() { 
      $('.colorbox').click(function() { 
       $('#box1').css('background-color', 'blue'); 
       $('#box2').css('background-color', 'red'); 
       $('#box3').css('background-color', 'yellow'); 
       $('#box4').css('background-color', 'green');   
      }); 
     });

見http://jsfiddle.net/YMqyE/

來源

2012-07-27 Chris Levine

喜歡這個？ http://jsfiddle.net/YMqyE/2/

$(document).ready(function() { 
     $('.colorbox').click(function() { 
      var $b1 = $('#box1'), 
       $b2 = $('#box2'), 
       $b3 = $('#box3'), 
       $b4 = $('#box4'), 
       box4Color = $b4.css('background-color'); 
      $b4.css('background-color', $b3.css('background-color')); 
      $b3.css('background-color', $b2.css('background-color')); 
      $b2.css('background-color', $b1.css('background-color')); 
      $b1.css('background-color', box4Color); 

     }); 
    });

來源

2012-07-27 18:11:49 MHollis

如果有什麼的jsfiddle無法訪問？請在您的答案中發佈相關代碼，否則這不是一個真正的答案。 – MetalFrog 2012-07-27 18:13:42

$(document).ready(function() { 
    $('.colorbox').click(function() { 
     var $OddColorOut = $('#box1').css('background-color'); 

     $('#box1').css('background-color', $('#box4').css('background-color')); 
     $('#box4').css('background-color', $('#box3').css('background-color')); 
     $('#box3').css('background-color', $('#box2').css('background-color')); 
     $('#box2').css('background-color', $OddColorOut); 
    }); 
});

http://jsfiddle.net/thalladay/p92V6/

來源

2012-07-27 18:33:13

更短，效率更低。我var $ b1 = etc等的唯一原因是避免爲每個方塊創建兩次相同的jQuery對象。 – MHollis 2012-07-27 21:28:24

@MHollis是對的，你正在執行8個查詢，他表演了4. – 2012-07-31 17:27:42

@MHollis是對的，如果目標是表現的話。我的目標是一個比較簡單的例子，那些喜歡較少變量創建的人，並不關心做額外選擇的性能損失。 – 2012-08-01 15:58:35

使用jquery更改div的顏色以匹配另一個div

回答

相關問題