2

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

那么有人可以告诉我该怎么做吗？

4

7 回答 7

2

改变

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

至

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

您需要使用背景颜色

于 2013-10-03T10:49:08.727 回答
2

我更喜欢这个：

 $(document).ready(function() {
            $("#box a").click(function(event) {
              $('div#box').css('background-color', $(this).attr('id') );
            });
        });
于 2013-10-03T10:56:36.373 回答
1

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

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

示例小提琴

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

于 2013-10-03T10:48:57.517 回答
1

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

<script type="text/javascript">
    $(document).ready(function() {
        $("a").click(function(event) {
            var bgcolor = $(this).attr('id');
            jQuery('div#box').css({background:bgcolor});
        });
    });
</script>
于 2013-10-03T10:50:47.313 回答
1

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

这是一个工作演示

于 2013-10-03T10:50:52.453 回答
1

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

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

演示：小提琴

于 2013-10-03T10:47:51.480 回答
0

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

$(".smallBox").click(function(event) {
   var bgcolor = $(this).css('background-color');
   jQuery('div#box').css('background',bgcolor);
});
于 2013-10-03T14:26:37.200 回答