用 switch/case 交换特定 div 的背景颜色答案

【问题标题】：Swap background-color of a specific div with switch/case用 switch/case 交换特定 div 的背景颜色
【发布时间】：2015-08-19 00:52:19
【问题描述】：

我正在尝试根据其内容交换某些特定 div 的背景颜色。
当他们的输入是“生活方式”或“政治”或“经济”或“本地”或“体育”或“新闻”时，他们的背景颜色应该交换。

var colorInput = document.getElementById('views-field-field-section').textContent;

      switch (colorInput) {
    case 'Lifestyle':
      document.getElementById('views-field-field-section').style.backgroundColor = '#9518b8';                
        break;
    case 'Local':
      document.getElementById('views-field-field-section').style.backgroundColor = '#009fe3';
        break;
    case 'Sports':
      document.getElementById('views-field-field-section').style.backgroundColor = '#95c11f';
        break;
    case 'Economy':
      document.getElementById('views-field-field-section').style.backgroundColor = '#d40d10';
        break;
     case: 'Politics':
       document.getElementById('views-field-field-section').style.backgroundColor = '#ffcc00';
        break;
    default:

        break;
  }

http://jsfiddle.net/gFN6r/501/

【问题讨论】：

你不应该在多个元素上使用相同的 id，它是无效的。使用不同的 id。
正如我在您的 jsfiddle 上看到的，您的 html 代码中的 div 元素中有空格，所以只需 trim 您的 colorInput。
id 必须是唯一的。
你会用jQuery吗？还是 mootools 是必需品？
唯一ID是我的问题。它必须是相同的 ID。否则我只能通过 CSS 交换颜色。

标签： javascript css switch-statement background-color

【解决方案1】：

您不能在一个 html 文档中多次使用 id。这将是无效的 html。我已将 id 更改为一个类，然后使用以下代码并且它可以工作：

var colorInput = document.getElementsByClassName('views-field-field-section');
for(i=0; i<colorInput.length; i++) {
      var colorInputText = colorInput[i].textContent.trim();
      switch (colorInputText) {
        case 'Lifestyle':
                colorInput[i].style.backgroundColor = '#9518b8';                
                break;
        case 'Local':
                colorInput[i].style.backgroundColor = '#009fe3';
                break;
        case 'Sports':
                colorInput[i].style.backgroundColor = '#95c11f';
                break;
        case 'Economy':
                colorInput[i].style.backgroundColor = '#d40d10';
                break;
        case 'Politics':
                colorInput[i].style.backgroundColor = '#ffcc00';
                break;
        default:
                text ='Nix!'; 
  }
}

这里是 jsfiddle： http://jsfiddle.net/gFN6r/505/

【讨论】：

【解决方案2】：

哦，伙计。不要使用相同的id :) 但如果有必要，ok...

我稍微调整了您的源代码，例如有一些语法错误，并添加了 jQuery，希望它不是问题:)

如果您使用相同的id，这将不起作用 - $('#myid')，但这会 - $('[id=myid]')
不要忘记使用trim-like 函数来删除尾随空格。
请考虑一下如何避免代码中出现相同的id。

http://jsfiddle.net/gFN6r/506/

$('[id=views-field-field-section]').each(function() {
    var text = $(this).text();
    text = $.trim(text);

    switch (text) {
        case 'Lifestyle':
            $(this).css({backgroundColor: '#9518b8'});
            break;
        case 'Local':
            $(this).css({backgroundColor: '#009fe3'});
            break;
        case 'Sports':
            $(this).css({backgroundColor: '#95c11f'});
            break;
        case 'Economy':
            $(this).css({backgroundColor: '#d40d10'});
            break;
         case 'Politics':
             $(this).css({backgroundColor: '#ffcc00'});
            break;
        default:
            $(this).text('Nix!');
            break;
    }
});

【讨论】：

【解决方案3】：

在这里，您可以使用 jQuery 来简化 plunker。 id 设置在包含父级上，而您需要遍历子级并检查其内容。请注意，我使用.trim() 来消除开头和结尾空格，以便匹配大小写。

【讨论】：

【解决方案4】：

枚举使用 abs 1 -1 =0 -1 = -1(abs) 让你回到 1，所以如果你从 $case=1 开始，只是 -1 作为绝对值，你会在 1 和 0 之间打勾你总是减去 1

【讨论】：