1

我的网页中有三列。每列有一组三个正方形，正方形代表一种独特的颜色。因此，当用户单击第 1 列中的红色时，第 1 列中的文本变为红色，如果为蓝色，则变为蓝色。如果用户单击第 2 列中的绿色，则第 2 列中的文本将变为绿色。

我是 jQuery 新手，所以我不确定我是否做得对，并且想知道这是否是最好的方法。

我想知道的是无论如何都可以改变这一点，所以每列中只有一种称为选择器的样式。我也可以更改 jQuery，使其不是 3 个单独的函数，是否有更清洁的方法？

谢谢。

4

3 回答 3

2

是的！CSS 选择器都是可重用的！您不应该创建具有完全相同属性和值的多个类！

你需要的所有 CSS 类.col, .wrapper, .picker

然后当你想在多个地方使用代码时使用 jQuery 而不是使用 div id，找出元素相对于触发事件的元素的位置，或者$(this)

查看小提琴 http://jsfiddle.net/WJ5DZ/1/

于 2013-06-12T19:48:40.473 回答
0

你可以这样试试：

$(function () {
    $('.picker').css('background-color', function () { //Setup the background color for each picker square.
        return $(this).data('color'); //get its color from data attribute
    }).click(function () { //Chain it through for the click event
        $(this).closest('.content').css({ //get the parent content element where color needs to be applied
            color: $(this).data('color') //set the color as that of the clicked picker.
        });
    });
});

演示

在标记中提供一个名为 say 的类content来标识它自己的父内容。

<div class='col2 content' id="test1"> <!-- You don't need id if you are using this for selcting.

删除所有picker1, 2css 规则，只保留picker.

使用closest将确保即使您计划向选择器添加包装器，您的实际内容 div 仍将被选中。

于 2013-06-12T19:47:38.710 回答
0

是的，有..将所有类（picker1，picker2）更改为picker并删除id（test，test1 ..）

试试这个

   $('.picker').each(function(){
      var myColor = $(this).data('color');
      $(this).css({background: myColor })
   });
  $('.picker').click(function(){
     var myColor = $(this).data('color');
     $(this).parent().css({color: myColor});

  });

注意：您不需要循环click内的事件each

在这里摆弄

于 2013-06-12T19:50:17.593 回答