有没有办法简化这个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');
    });
  });

我觉得我必须遗漏一些东西，并且有办法让这个更加清洁。谢谢！

编辑：我只想澄清这段代码的功能。基本上，每个“选择”类对应于段落中句子的跨度标记。该代码允许用户通过单击突出显示每个段落中的一个句子。如果它点击不同的句子，则该句子将被突出显示，而该特定段落中的其余句子将被取消选择。

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

虽然看起来这不是你想做的事。

首先将背景设置为白色，然后设置为黄色。

虽然这正是您的代码所做的

修改

更改了背景的第一个更改，以代表当前类的所有元素，而不仅仅是单击的一个（感谢Sean）。

代码期望该类是唯一的类。

如果您可以显示您的代码，我会看到这是否有效，或者我会更新我的答案。

修改

工作示例：

http://jsfiddle.net/6Dznp/

Answer 3

难道你不能给同一个班级的所有元素？你命名这些类的方式使它们对我来说都像是ids。给他们所有选择，然后做

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

http://jsfiddle.net/QfS3G/

Answer 4

看起来你想要在一个集合中切换一个元素的状态。 如果这个假设是正确的，你可以使用下面的代码：

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

以下代码用于更正问题中发布的代码。

您可以将mutlitple选择器合并为单个集合，方法是用逗号分隔它们。

试试这个：

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

Answer 5

逗号分隔选择器中的所有类，如下所示：

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

Answer 6

for (var i = 0; i <= 4; i++) {
    $('.selection' + i).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');
    });

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

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

Answer 7

试试这个：

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

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