Question

我怎么能更简洁地写这个？

这是按钮列表，它们都做同样的事情，改变了一些css属性，但是在不同的地方

$('#right-panel li:nth-child(1)').click(function() {
        $('#pom03par01WraperAbsolute').css('display','block');
        $(this).css('background','#adff84');
        $('.par01table').css('background','#adff84');
        return false;
    }); 
    $('#right-panel li:nth-child(2)').click(function() {
        $('#pom03par02WraperAbsolute').css('display','block');
        $(this).css('background','#adff84');
        $('.par02table').css('background','#adff84');
        return false;
    }); 
    $('#right-panel li:nth-child(3)').click(function() {
        $('#pom03par03WraperAbsolute').css('display','block');
        $(this).css('background','#adff84');
        $('.par03table').css('background','#adff84');
        return false;
    }); 
    $('#right-panel li:nth-child(4)').click(function() {
        $('#pom03par04WraperAbsolute').css('display','block');
        $(this).css('background','#adff84');
        $('.par04table').css('background','#adff84');
        return false;
    });

Answer 1

选项1：

使用for loop动态构建选择器：

var numberOfChildren = 4;

for (var i = 1; i <= numberOfChildren; i++) {
    $('#right-panel li:nth-child(' + i + ')').click(function() {
        $('#pom03par0' + i + 'WraperAbsolute').css('display', 'block');
        $(this).css('background', '#adff84');
        $('.par0' + i + 'table').css('background', '#adff84');
        return false;
    });
}

选项2：

你似乎对每个元素做同样的事情。简单地为每个元素分配相同的类并按该类操作它。

其他信息

阅读jQuery Events: Stop (Mis)Using Return False也可能对您有所帮助。

Answer 2

你可以使用jQuery尝试这个：

$('#right-panel li')each(function(e){
        var i = $(this).index()+1;
        $(this).click(function(){
            if(i<9){
                  i = "0"+i;
             }
             $('#pom03par' + i + 'WraperAbsolute').css('display', 'block');
             $(this, '.par' + i + 'table').css('background','#adff84');
             return false;
        });
    });

Answer 3

看看你的代码，看起来这4个部分做的基本相同。您可以在$（this）选择器上使用.index()方法找出实际点击的LI，这将返回一个基于零的数字。我已经为你创建了一个jsFiddle来查看下面的内容。

$('#test ul li').click(function() {
    index = $(this).index() + 1;
    $('[id$=WraperAbsolute]').css("background-color", "green");
    $('#pom03par' + index + 'WraperAbsolute').css("background-color", "red");
    //alert("clicked: " + index);
});

jsFiddle

Answer 4

简单的答案是肯定的。任何时候你想要按Ctrl-C，抵制这种冲动并输入“function”。

背景线逐字重复。唯一真正不同的是pom编号和par编号。那些可能是你对新功能的争论。您甚至可以留出空间进行扩展，例如，如果默认（＃adff84）不是您想要的，则允许传递背景颜色。

我能简明扼要地写一下吗？

4 个答案: