JQuery改变列内文本的颜色答案

【问题标题】：JQuery changing colour of text within columnsJQuery改变列内文本的颜色
【发布时间】：2013-06-12 19:38:53
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： javascript jquery html css css-transitions

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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

在标记中提供一个名为 say 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 仍将被选中。

【讨论】：

【解决方案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 循环中不需要 click 事件

fiddle here

【讨论】：