0

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

我的 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而不是硬编码来切换颜色。任何人都可以帮助我吗？非常感谢！

4

5 回答 5

7

JS小提琴

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

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>
于 2013-08-15T18:27:42.623 回答
2

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

这是删除了 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/

于 2013-08-15T18:24:58.163 回答
0

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

idTrigger = event.target.id;

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

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

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

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

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

于 2013-08-15T18:16:39.450 回答
0

你可以试试

.addClass('classname');

和

.removeClass('classname');

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

于 2013-08-15T18:18:59.857 回答
0

由于您有 2 个不同 ID 的不同工作流程，因此如果您使用嵌套 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:

        }
于 2013-08-15T18:24:07.070 回答