在jQuery中单击时获取背景色

我只是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>

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

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

jquerybg

css是这样的

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

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

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

#盒子{
宽度：300px；
高度：300px；
边框：1px实心#ccc；
}

到目前为止，我使用的jQuery trid是这样的

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

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

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

$（文档）.ready（函数（）{
$（“a”）。单击（函数（事件）{
//警报（event.target.id）；
var bgcolor=event.target.id；
jQuery（'div#box'）.css（'background'，'bgcolor'）；
});
});

---

有人能告诉我怎么做吗？

这里

bgcolor

是一个变量，而不是字符串文字

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

---

演示：

您需要将

css（）

值设置为变量本身，而不是字符串。试试这个：

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

---

一些注释；首先，id属性是唯一的，所以您只需要

#box

，而不需要

div#box

。此外，您只需要设置

背景色

。仅使用颜色设置

背景

将重置所有其他属性（例如

背景重复

，

背景图像

等），这可能会导致以后出现问题。最后，您可以使用shorted

this.id

获取单击元素的id。最后，您需要使用

preventDefault（）

停止从页面导航的链接的默认行为。

更改

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

至

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

---

您需要使用背景色

根据以下代码更改代码

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

$（文档）.ready（函数（）{
$（“a”）。单击（函数（事件）{
var bgcolor=$（this.attr（'id'）；
jQuery（'div#box'）.css（{background:bgcolor}）；
});
});

通过从锚中删除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>

到

这是一份工作报告

我更喜欢这样：

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

---

另一个稍作修改的解决方案：。单击彩色方块以查看较大的方块将其颜色更改为单击框的颜色

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

---

但div的背景色未激活。单击一秒钟后它就会显示。我希望它会一直显示，直到单击另一种颜色为止。你能为这个做个摆弄吗？@RakeshMishra你已经在传递

event

了，现在放

event.preventDefault（）内部代码和try@RakeshMishra这是因为
a
元素的默认操作不可用cancelled@ArunPJohny那怎么办呢？