使用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

回答

相关问题