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

I am just newbie to jQuery. I have one div. Under that I have some list of colors. I want that when I will click on those colors then the background color of the div will be change to the clicked color. My markup for the code is like this

我只是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 is like this

css就是这样的

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

and the jQuery what I have trid so far is like this

到目前为止我所拥有的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>

So can someonme kindly tell me how to do this?

someonme能告诉我怎么做吗?

7 个解决方案

#1

You need to set the css() value as the variable itself, not a string. Try this:

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

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

Example fiddle

Some notes; firstly id attributes are unique, so you only need #box, not div#box. Also, you only want to set the background-color. Setting background with the colour only will reset all other properties (such as background-repeat, background-image etc) which may lead to issues later. Finally, you can use the shorted this.id to get the id of the clicked element. Finally, you need to use preventDefault() to stop the default behaviour of the link navigating away from the page.

一些笔记;首先id属性是唯一的,所以你只需要#box,而不是div#box。此外,您只想设置背景颜色。仅使用颜色设置背景将重置所有其他属性(例如背景重复,背景图像等),这可能会导致以后出现问题。最后,您可以使用shorted this.id来获取被点击元素的id。最后,您需要使用preventDefault()来停止导航离开页面的链接的默认行为。

#2

Change

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

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

You need to use background-color

你需要使用背景颜色

#3

I would prefer this:

我更喜欢这个:

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

#4

Change your code as per below code.

根据以下代码更改您的代码。

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

#5

Modify your html by removing the href from anchor to avoid postback

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

And modify one line in your jquery, change

并修改jquery中的一行,进行更改

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

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

Here is a working demo

这是一个工作演示

#6

Here bgcolor is a variable not a string literal

这里bgcolor是一个不是字符串文字的变量

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

Demo: Fiddle

#7

Another slightly modified solution: http://jsfiddle.net/VrGP7/. Click the colored squares to see the larger one change its color to the color of the clicked box.

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

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

#1