2

嗨，我试图简化的代码是：

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

我觉得我一定错过了一些东西，并且有一种方法可以让这个更干净。谢谢！

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

4

7 回答 7

3

拥有一个类并具有以下代码会更容易：

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

于 2011-06-24T20:54:13.497 回答
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/

于 2011-06-24T20:53:39.693 回答
1

你不能给所有的元素同一个类吗？您命名类的方式使它们在我看来都像是 id。给他们所有的选择，然后做

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

http://jsfiddle.net/QfS3G/

于 2011-06-24T20:54:04.260 回答
1

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

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');
    });
});
于 2011-06-24T20:54:11.453 回答
1

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

$(document).ready(function(){
    $('.selection0, .selection1, .selection2').click(function() {
        $(this).css('background-color', 'white');
        $(this).css('background-color', 'yellow');
    });    
});
于 2011-06-24T20:54:52.677 回答
1 
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;
    }
}
于 2011-06-24T20:59:35.230 回答
0

尝试这个：

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

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

于 2011-06-24T20:56:06.507 回答