Question

我只是jQuery的新手。我有一个div。在那之下，我有一些颜色列表。我希望当我点击这些颜色时，div的背景颜色将变为点击的颜色。我的代码标记就像这样

<h2>jQuery Bg</h2>
  <div id="box"></div>
  <ul>
    <li><a id="red" href="">Red</a></li>
    <li><a id="green" href="">Green</a></li>
    <li><a id="blue" href="">Blue</a></li>
    <li><a id="black" href="">Black</a></li>
  </ul>

css就像这样

 <style type="text/css">
    #box {
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
    }
  </style>

到目前为止我所拥有的jQuery是这样的

<script type="text/javascript">
  $(document).ready(function() {
    $("a").click(function(event) {
        //alert(event.target.id);
        var bgcolor = event.target.id ;
      jQuery('div#box').css('background','bgcolor');
    });
});
</script>

某人能告诉我怎么做这个吗？

Answer 1

更改

var bgcolor = event.target.id ; jQuery('div#box').css('background','bgcolor');

要

var bgcolor = $(this).attr('id'); $('div#box').css('background-color',bgcolor);

您需要使用 background-color

Answer 2

我更喜欢这个：

 $(document).ready(function() {
            $("#box a").click(function(event) {
              $('div#box').css('background-color', $(this).attr('id') );
            });
        });

Answer 3

此处bgcolor是一个不是字符串文字的变量

jQuery(function ($) {
    $("a").click(function (event) {
        var bgcolor = this.id;
        $('div#box').css('background', bgcolor);
        event.preventDefault()
    });
});

演示：Fiddle

Answer 4

您需要将css()值设置为变量本身，而不是字符串。试试这个：

$("a").click(function(e) {
    e.preventDefault();
    var bgcolor = this.id;
    jQuery('#box').css('background-color', bgcolor);
});

Example fiddle

一些笔记;首先，ID属性是唯一的，因此您只需要#box，而不是div#box。此外，您只想设置background-color。仅使用颜色设置background会重置所有其他属性（例如background-repeat，background-image等），这可能会导致以后出现问题。最后，您可以使用shorted this.id来获取所单击元素的id。最后，您需要使用preventDefault()来停止导航离开页面的链接的默认行为。

Answer 5

按照以下代码更改您的代码。

<script type="text/javascript">
    $(document).ready(function() {
        $("a").click(function(event) {
            var bgcolor = $(this).attr('id');
            jQuery('div#box').css({background:bgcolor});
        });
    });
</script>

Answer 6

通过从锚中删除href来修改你的html以避免回发

 <h2>jQuery Bg</h2>
  <div id="box"></div>
  <ul>
    <li><a id="red" >Red</a></li>
    <li><a id="green" >Green</a></li>
    <li><a id="blue" >Blue</a></li>
    <li><a id="black">Black</a></li>
  </ul>

修改jquery中的一行，更改

jQuery('div#box').css('background','bgcolor');

到

jQuery('div#box').css('background',bgcolor);

这是一个有效的demo

Answer 7

另一个略微修改的解决方案：http://jsfiddle.net/VrGP7/。单击彩色方块以查看较大的方块，将其颜色更改为所单击框的颜色。

$(".smallBox").click(function(event) {
   var bgcolor = $(this).css('background-color');
   jQuery('div#box').css('background',bgcolor);
});

在jQuery中单击时获取背景颜色

7 个答案: