Question

任何人都可以告诉我缩短此代码的方法或示例会很棒吗？数组是最好的方法吗？

$(document).ready(function(){
$("#parent1").css("display","none");

$(".aboveage1").click(function(){
    if ($('input[name=age1]:checked').val() == "No" ) {
        $("#parent1").slideDown("fast"); //Slide Down Effect   
    } else {
        $("#parent1").slideUp("fast");  //Slide Up Effect
    }
 });            
});


$(document).ready(function(){
$("#parent2").css("display","none");

$(".aboveage2").click(function(){
    if ($('input[name=age2]:checked').val() == "No" ) {
        $("#parent2").slideDown("fast"); //Slide Down Effect   
    } else {
        $("#parent2").slideUp("fast");  //Slide Up Effect
    }
 });            
});

$(document).ready(function(){
$("#parent3").css("display","none");

$(".aboveage3").click(function(){
    if ($('input[name=age3]:checked').val() == "No" ) {
        $("#parent3").slideDown("fast"); //Slide Down Effect   
    } else {
        $("#parent3").slideUp("fast");  //Slide Up Effect
    }
 });            
});

Answer 1

您应该更加干净地重写HTML和CSS。因此，您的JavaScript不需要注册相同处理程序代码的3倍; - ）

Answer 2

您可以使用for循环

for(var i = 1; i < 4; i++) {

$("#parent"+string(i)).css("display","none");

$(".aboveage"+string(i)).click(function(){
    if ($('input[name=age'+string(i)+']:checked').val() == "No" ) {
        $("#parent"+string(i)).slideDown("fast"); //Slide Down Effect   
    } else {
    $("#parent"+string(i)).slideUp("fast");  //Slide Up Effect
    }
});  
}

Answer 3

以下是我遵守的一些原则，以便制作可读，优雅和简洁的代码：

将数据与代码逻辑分开，这样您就只能拥有一次逻辑。它可以对不同的数据进行操作。这主要意味着如果你必须修改它，你只需要在一个地方修改它，你就不会忘记修改其他地方。
将样式的初始状态放在css中，如果必须更改则用javascript触摸它。
不是给你的3个元素只有唯一的类，而是给他们一个描述他们常见行为的类，比如'滑动'和你的复选框一样：'age-checkbox'。现在你可以用jquery找到它们，而不必单独引用它们。
确保您的代码格式符合您的语义结构（有助于提高可读性）
避免使用匿名内联函数。参数列表中的内联函数掩盖了代码的结构。如果你真的必须这样做，至少给它们一个名字，这样它们在调试和分析时就不会显示为“匿名函数”。

感谢您在将内容投入生产之前询问代码审核。如果有更多人这样做，我们就不必提出这么多错误。

这可能会激发你的灵感。我并不认为它有效。我没有验证jquery函数的确切函数，并对你的html结构做了假设。我不是要么声称这是最好的方法，但是考虑到关于你的html结构的少量信息以及我愿意投入的时间，你应该明白这一点。

.slidable
{
    display: none;
}


<form ...>

    <div id="#parent1" class="slidable">

        <div class="aboveage1 slidebutton"></div>

        <input class="age-checkbox" type="checkbox" name="age1" />

    </div>

</form>


$( document ).ready( function documentReady() 
{
    $( ".slidebutton" ).each( attachSlide );


    function attachSlide()
    {
        $( this ).click( slide );
    }


    function slide( event ) 
    {
        var cb = $( event.target ).parent().children( '.age-checkbox' );


        if( cb.val() == "No" )

            cb.parent().slideDown( "fast" ); //Slide Down Effect   


        else 

            cb.parent().slideUp( "fast" ); //Slide Up Effect
    }

});

这个javascript可以缩短吗？

3 个答案: