Jquery如何将文本背景更改为不同的颜色答案

【问题标题】：Jquery how to change text background to different colorJquery如何将文本背景更改为不同的颜色
【发布时间】：2013-08-16 02:32:50
【问题描述】：

我正在尝试在用户单击单词时创建不同的颜色状态

我的html

<a href='#' class='click' id='2'>
   word
</a>

<a href='#' class='click' id='3'>
   second word
</a>

我想根据id切换文字背景。

例如，当用户单击word -> 将背景颜色更改为黄色再次单击 -> 橙色并再次单击 -> 原始（白色和透明）。这是 2 个州。

第二个例子当用户点击second word -> 将背景颜色更改为黄色再次点击 -> 橙色，再次点击 -> 绿色并再次点击 -> 红色并再次点击 ->（白色和透明）这是 3 种状态

颜色状态基于 id 属性。

我的代码是这样的

   $('.click').click(function(){
            var states = $(this).attr('id');
            var classname = $(this).attr('class');

            switch (classname){
                case 'click':
                    $(this).attr('class', 'yellow');
                    $(this).css('background-color', 'yellow');
                break;

                case 'yellow':
                    $(this).attr('class', 'orange');
                    $(this).css('background-color', 'orange');
                break;

                case 'orange':
                    $(this).attr('class', 'red');
                    $(this).css('background-color', 'red');
               break;

               case 'red':
                    $(this).attr('class', 'click');
                    $(this).css('background-color', 'white');
               break;
               //add more if I have too…..
            }
        })

我试图弄清楚如何根据id 切换颜色，而不是硬编码它。任何人都可以帮助我吗？非常感谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

JS FIDDLE

基本上，您可以设置一个全局颜色数组，然后在每个链接上设置一个数据属性，以及一个最大属性，然后在每次单击时背景颜色将跳转到下一个颜色，直到达到最大值然后它重新开始循环。

JS

var colors = ['white', 'yellow', 'orange', 'red'];
$('.click').click(function(){
            var states = $(this).data('ci');
            states++;
            if(states > $(this).data('max'))
               {
                   states = 0;
               }
               $(this).data('ci', states);
               $(this).css('background-color', colors[states]);

        })

HTML

<a href='#' class='click' data-ci='0' data-max="2">
   word
</a>

<br>

<a href='#' class='click' data-ci='0' data-max="3">
   second word
</a>

【讨论】：

【解决方案2】：

我不会设置 id，而是设置颜色的数据属性和/或十六进制值，这里是代码 sn-p：

这是去掉了 id 并添加了 data-color 属性的 html

<a href='#' class='click' data-color='#000'>
   Black
</a>

<a href='#' class='click' data-color='green'>
    Green
</a>

这里是触发背景变化的javascript：

$('.click').on('click', function(e) {
    $('body').css('background-color', $(this).data('color')); 
});

当需要更改颜色和/或添加新颜色时，此示例无需编辑任何 javascript。

下面是它的一个例子：http://jsfiddle.net/XCr4Q/

【讨论】：

我同意 data-* 属性是存储它的正确位置，但数字 ids 不是无效的，至少在 HTML5 中（尽管我不建议使用数字 @987654326无论如何@s）......不，我没有对你投反对票:)
谢谢没意识到。

【解决方案3】：

您可以使用下面列出的代码来确定是什么触发了该函数，然后通过将其更改为新颜色来查找它所遵循的颜色。

idTrigger = event.target.id;

除此之外，您还应该删除其他类，否则情况将始终如此。你可以这样做：

$(this).removeClass('click');

可以通过以下方式添加：

$(this).addClass('click');

但是，我想知道为什么您不只是使用 jQuery .val() 函数来存储一些数据。 http://api.jquery.com/val/

【讨论】：

【解决方案4】：

你可以试试

.addClass('classname');

和

.removeClass('classname');

如果您需要工作样本，请告诉我

【讨论】：

【解决方案5】：

由于您对不同的 ID 有 2 个不同的工作流程如果你使用嵌套的 switch 语句会很容易

switch (id) {
        case 1:
            switch(color) {
                 case('yellow'):
                      // change color
                      break;
                 case('orange'):
                      // change color
                      break;
                 default:

            }
            break;
        case 2:
            switch(color) {
                 case('yellow'):
                      // change color
                      break;
                 case('orange'):
                      // change color
                      break;
                 case('red'):
                      // change color
                      break;
                 default:

            }
            break;
        default:

        }

【讨论】：