Question

我试图根据内容交换某些特定div的背景颜色当他们的输入像＃34;生活方式＆＃34;时，他们的背景颜色应该互换。或者＆＃34;政治＆＃34;或者＆＃34;经济＆＃34;或＆＃34;本地＆＃34;或＆＃34;体育＆＃34;或＆＃34;新闻＆＃34;。

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更改为类，然后使用以下代码并且它可以工作：

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 :)但如果有必要，那么......

我调整了一点你的源代码，例如有一些语法错误，并添加了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

枚举使用abs 1 -1 = 0 -1 = -1（abs）会让你回到1，所以如果你从$ case = 1开始，只有-1作为绝对值，你将在1＆amp; 0无论哪种方式，你总是减去1

用开关/外壳交换特定div的背景颜色

4 个答案: