Есть ли способ упростить этот код JavaScript?(одинаковые функции для нескольких классов)

Question

Привет код, который я пытаюсь упростить:

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

Мне кажется, что я что-то упускаю, и что есть способ сделать это намного чище. Спасибо!

Редактировать: я просто хотел уточнить функциональность этого кода. По сути, каждый класс 'selection' соответствует тегам span вокруг предложений в абзаце. Код позволяет пользователю выделить ровно одно предложение в каждом абзаце, щелкнув по нему. Если щелкнуть другое предложение, оно будет выделено, а остальные предложения в этом конкретном абзаце отменены.

Answer 1

Было бы проще иметь один класс и иметь следующий код:

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

Хотя это выглядит странно, но ... Я предполагаю, что вы просто хотите, чтобы он мигал при нажатии на него?

ИЗМЕНИТЬ, чтобы добавить: Помните, вы можете иметь более одного класса на объекте ... т.е. <div class="selection selection1> и т. Д. *

РЕДАКТИРОВАТЬ 2:

Изваше обновление и опубликованный HTML, сделайте так, чтобы все ваши пролеты имели один и тот же класс и используйте это:

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

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

Answer 2

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

Хотя кажется, что это не то, что вы пытаетесь сделать.

Сначала вы устанавливаете фон белым, а затем желтым.

Хотя это именно то, что делает ваш код

EDIT

Изменено первое изменение фона для представления всех элементов с текущим классом вместо одного нажатого (спасибо Шону).

Код ожидает классбыть единственным классом.

Если вы сможете показать свой код, я посмотрю, сработает ли это, или я обновлю свой ответ.

РЕДАКТИРОВАТЬ

Рабочий пример:

http://jsfiddle.net/6Dznp/

Answer 3

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

Конечно, если вы хотите сделать разные вещи для каждого из них, вы можете включить оператор switch, который выглядит примерно так:

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

Answer 4

Разделите запятые всех ваших классов в селекторе, например:

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

Answer 5

Похоже, вы хотите переключать состояние элемента среди набора. Если это предположение верно, вы можете использовать фрагмент ниже:

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

Приведенный ниже код исправляет код, указанный в вопросе.

Вы можете объединить несколько селекторов в один набор, разделив их запятой.

Попробуйте это:

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

Answer 6

Не могли бы вы дать всем элементам один и тот же класс? То, как вы называете классы, делает их все похожими на идентификаторы. Дайте им всем класс выбора и просто сделайте

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

http://jsfiddle.net/QfS3G/

Answer 7

попробуйте это:

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

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