Is there a way to simplify this JavaScript code? (same functions for multiple classes)

Hi the code I am trying to simplify is:

  $(document).ready(function(){
    $('.selection0').click(function() {
        $('.selection0').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
    $('.selection1').click(function() {
        $('.selection1').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
    $('.selection2').click(function() {
        $('.selection2').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
    $('.selection3').click(function() {
        $('.selection3').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
    $('.selection4').click(function() {
        $('.selection4').css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
  });

I feel like I must be missing something, and that there is a way to make this much cleaner. Thanks!

Edit: I just wanted to clarify the functionality of this code. Basically, each 'selection' class corresponds to span tags around sentences in a paragraph. The code allows the user to highlight exactly one sentence in each paragraph by clicking on it. If it clicks on a different sentence, that sentence will be highlighted while the rest of the sentences in that开发者_StackOverflow社区 specific paragraph is deselected.

---

It would be easier to have a single class and have the following code :

$('.selection').click(function() {        
    $(this).css('background-color', 'white').css('background-color', 'yellow');    
});

Seems like odd code, though... I'm guessing your just wanting it to flash when you click it?

EDIT to Add : Remember, you can have more than one class on an object... ie <div class="selection selection1> etc...

EDIT 2 :

From your update and posted HTML, make all of your spans have the same class and use this :

$('.selection').click(function() {            
    $(this).css('background-color', 'yellow').siblings().css('background-color', 'white');    
});

http://jsfiddle.net/shaneblake/9pF6U/

---

  $(document).ready(function(){
    $('.selection0, .selection1, .selection2, .selection3, .selection4').click(function() {
        $('.'+$(this).attr('class')).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
  });

Although it seems like that isnt what you are trying to do.

You first set background to white and then to yellow.

Although that's exactly what your code does

EDIT

Changed the first change of the background to represent all elements with the current class in stead of just the one clicked (thanks Sean).

The code expects the class to be the only class.

If you can show your code I will see whether this will work or I'll update my answer.

EDIT

Working example:

http://jsfiddle.net/6Dznp/

---

Looks like you want to toggle state of an element amongst a set. If this assumption is correct you can use the snippet below:

var allItems = '.selection0, .selection1, .selection2, .selection3, .selection4';
$(document).ready(function(){
    $(allItems).click(function() {
            $(allItems).css('background-color', 'white');
            $(this).css('background-color', 'yellow');
    });
});

The code below is to correct the code that was posted in the question.

You can merge mutlitple selectors into a single set by seperating them with a comma.

Try this:

$(document).ready(function(){
    $('.selection0, .selection1, .selection2, .selection3, .selection4').click(function() {
            $('.selection0').css('background-color', 'white');
            $(this).css('background-color', 'yellow');
    });
});

---

Comma-separate all of your classes in the selector, like so:

$(document).ready(function(){
    $('.selection0, .selection1, .selection2').click(function() {
        $(this).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });    
});

---

for (var i = 0; i <= 4; i++) {
    $('.selection' + i).click(function() {
        $(this).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });
}

Of course if you want to do different things for each, you could include a switch statement looking something like this:

for (var i = 0; i <= 4; i++) {
    $('.selection' + i).click(function() {
        $(this).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });

    switch (i) {
    case 0:
        // Do something here if we are .selection0
        break;

    case 1:
        // Do something here if we are .selection1
        break;
    }
}

---

Couldn't you give all the elements the same class? The way you are naming the classes makes them all seem like ids to me. Give them all a class of selection and just do

$('.selection').click(function(){
    $(this).css('background-color', 'yellow');
    $('.selection').not(this).each(function(){
        $(this).css('background-color', 'white');
    });
});

http://jsfiddle.net/QfS3G/

---

try this:

$('[class *= selection]').click(function() {
    $(this).css('background-color', 'white');
    $(this).css('background-color', 'yellow');
});

http://api.jquery.com/attribute-contains-selector/