Question

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 specific paragraph is deselected.

Answer 1

  $(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/