Question

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

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

我想知道的是，无论如何要改变这一点，因此每列中只有一种称为选择器的样式。我也可以更改jQuery所以它不是3个单独的函数，有没有更简洁的方法呢？

感谢。

Answer 1

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

您需要的所有css课程.col, .wrapper, .picker

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

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

Answer 2

您可以尝试这种方式：

$(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.
        });
    });
});

Demo

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

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

删除所有picker1, 2 css规则，并只拥有picker。

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

Answer 3

是的，有...将所有类（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个活动

fiddle here

JQuery改变列中文本的颜色

3 个答案:

Demo