最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Swap background-color of a specific div with switchcase - Stack Overflow

programmeradmin2浏览0评论

I'm trying to swap the background-color of some specific divs basing on their content.
Their background-color should swap when their input is like "Lifestyle" or "Politics" or "Economy" or "Local" or "Sports" or "News".

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;
  }

/

I'm trying to swap the background-color of some specific divs basing on their content.
Their background-color should swap when their input is like "Lifestyle" or "Politics" or "Economy" or "Local" or "Sports" or "News".

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

Share Improve this question edited May 19, 2016 at 17:45 user6339740 asked Jun 4, 2015 at 12:03 Maximilian DahlMaximilian Dahl 1051 silver badge9 bronze badges 9
  • You should not use same id on multiple elements, it is not valid. Use different id's. – pisamce Commented Jun 4, 2015 at 12:11
  • As I can see on your jsfiddle you have spaces in your html code in div elements, so just trim your colorInput. – Анатолий Ивашов Commented Jun 4, 2015 at 12:12
  • id has to be unique. – Newinjava Commented Jun 4, 2015 at 12:15
  • Can you use jQuery? Or mootools is necessity? – Анатолий Ивашов Commented Jun 4, 2015 at 12:18
  • The unique ID is my problem. It has to be the same ID. Otherwise I could swap the color by CSS only. – Maximilian Dahl Commented Jun 4, 2015 at 12:22
 |  Show 4 more ments

4 Answers 4

Reset to default 6

You cannot use ids more than once in an html document. This would be invalid html. I have changed the id to a class, and then used the following code and it works:

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!'; 
  }
}

Here is the jsfiddle: http://jsfiddle/gFN6r/505/

Oh man. Don't use the same id :) But if it is necessary, ok...

I adjusted a little bit your source code, e.g. there was some syntax error, and added jQuery, hope it's not a problem :)

  1. If you use the same id, this will not work - $('#myid'), but this will - $('[id=myid]')

  2. Don't forget to use trim-like function to remove trailing spaces.

  3. And please think a little about how to avoid the same id in your code.

http://jsfiddle/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;
    }
});

Here you have it using jQuery to simplify plunker. The id is set on the containing parent, while you need to iterate over the children and to check for their content. Note that I've used .trim() to eliminate start and trailing spaces so the match case would catch.

Enumerate use abs 1 -1 =0 -1 = -1(abs) gets you back to 1 so if you start with $case=1 and just -1 as an absolute value you will tick tock between 1 & 0 either way you always subtract 1

发布评论

评论列表(0)

  1. 暂无评论