将特定 div 的背景色替换为 switch/case

Question

我正在尝试根据内容交换某些特定 div 的背景颜色。
当他们的输入类似于 "Lifestyle" 或 "Politics" 或 "Economy" 或 "Local" 或 "Sports" 或 "News".[=14 时，他们的背景颜色应该交换=]

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/

Answer 1

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

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/

Answer 2

天哪。不要使用相同的 id :) 但如果有必要，ok...

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

如果您使用相同的 id，这将不起作用 - $('#myid')，但这会 - $('[id=myid]')
不要忘记使用类似 trim 的函数来删除尾随空格。
请想一想如何避免在您的代码中出现相同的 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;
    }
});

Answer 3

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

Answer 4

Enumerate use abs 1 -1 =0 -1 = -1(abs) 让你回到 1 所以如果你从 $case=1 开始并且只是 -1 作为绝对值你会在 1 和0 无论哪种方式，你总是减去 1

将特定 div 的背景色替换为 switch/case

Swap background-color of a specific div with switch/case

javascript

css

background-color

switch-statement