CODEWITHSUNDEEP
javascriptjquery
FlyingCat
FlyingCat

Reputation: 14288

Jquery how to change text background to different color

I am trying to create different color state when user click the words

my html

<a href='#' class='click' id='2'>
   word
</a>

<a href='#' class='click' id='3'>
   second word
</a>

I want to switch the text background based on the id.

For example when user clicks word -> change background color to yellow click again -> orange and click again -> original (white and transparent). It's 2 states.

Second example when user clicks second word -> change background color to yellow click again -> orange, click again -> green and click again -> red and click again ->(white and transparent) It's 3 states

The color states is based on id attribute.

My codes are like

   $('.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…..
            }
        })

I am trying to figure out how to switch the color based on the id instead of hardcode it. Can anyone help me about it? Thanks a lot!

Upvotes: 0

Views: 4755

Answers (5)

johnferrie
johnferrie

Reputation: 242

Instead of setting an id, I would set a data-attribute of the color and or hex value here is the code snippet:

Here is the html with removed id and added data-color attribute

<a href='#' class='click' data-color='#000'>
   Black
</a>

<a href='#' class='click' data-color='green'>
    Green
</a>

Here is the javascript that triggers background change:

$('.click').on('click', function(e) {
    $('body').css('background-color', $(this).data('color')); 
});

This example removes the need to edit any javascript when a color changes is needed and or addition of a new color.

Here is an example of it in action: http://jsfiddle.net/XCr4Q/

Upvotes: 2

Rooster
Rooster

Reputation: 10077

JS FIDDLE

Basically, you can set a global colors array, and then set a data attribute on each link, as well as a max attribute, then on every click the background color will jump to the next color until it hits its max then it restarts the cycle.

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>

Upvotes: 7

Farhan
Farhan

Reputation: 752

Since you have 2 different workflow for different ID it will be easy if you use nested switch statement

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:

        }

Upvotes: 0

blurfus
blurfus

Reputation: 14041

you can try

.addClass('classname');

and

.removeClass('classname');

let me know if you need a working sample

Upvotes: 0

NLCJ
NLCJ

Reputation: 21

You could use the code listed below to determine what triggered the function, and then lookup what color it has followed by changing it to the new color.

idTrigger = event.target.id;

Besides that you should also remove the other class, otherwise case one will always be the case. You can do so by using:

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

Adding can be done by:

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

However, I am wondering why you are not just using the jQuery .val() function to store some data. http://api.jquery.com/val/

Upvotes: 0

Related Questions