Question

我正在尝试在用户单击

时创建不同的颜色状态

我的HTML

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

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

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

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

用户点击second word时的第二个示例 - ＆gt;将背景颜色更改为黄色再次单击 - ＆gt;橙色，再次点击 - ＆gt;绿色并再次点击 - ＆gt;红色并再次点击 - ＆gt;（白色和透明）这是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而不是硬编码来切换颜色。任何人都可以帮我吗？非常感谢！

Answer 1

JS FIDDLE

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

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>

Answer 2

我不是设置id，而是设置颜色和/或值的数据属性，这里是代码片段：

这是带有已移除ID的html并添加了data-color属性

<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/

Answer 3

您可以使用下面列出的代码来确定触发该功能的内容，然后通过将其更改为新颜色来查找其后面的颜色。

idTrigger = event.target.id;

除此之外，您还应该删除其他类，否则情况将始终如此。您可以使用以下方式执行此操作：

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

添加可以通过以下方式完成：

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

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

Answer 4

你可以尝试

.addClass('classname');

和

.removeClass('classname');

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

Answer 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:

        }

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

5 个答案: