这个javascript可以缩短吗？

谁能告诉我缩短这段代码的方法，或者举个例子就好了？数组是最好的方法吗

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

---

你应该重写你的HTML和CSS更加枯燥。因此，JavaScript不需要注册相同处理程序代码的3倍；-）

您可以使用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
    }
});  
}

for（变量i=1；i<4；i++）{
$（“#父项”+字符串（i））.css（“显示”、“无”）；
$（“.overage”+字符串（i））。单击（函数（）{
if（$（'input[name=age'+string（i）+']：checked'）。val（）=“No”）{
$（“#父项”+字符串（i））.slideDown（“快速”）；//向下滑动效果
}否则{
$（“#父项”+字符串（i））.slideUp（“快速”）；//向上滑动效果
}
});  
}

以下是我为编写可读、优雅、简洁的代码而遵循的一些原则：

• 将数据与代码逻辑分开，这样您就只有一次逻辑了。它可以对不同的数据进行操作。这主要意味着，如果你必须修改它，你只需要在一个地方修改它，你不会忘记修改其他地方

• 将样式的初始状态放在css中，如果需要更改，则使用javascript触摸它

• 不要只给你的3个元素一个唯一的类，而是给他们一个描述他们共同行为的类，比如“可滑动”和同样的复选框：“年龄复选框”。现在，您可以使用jquery找到它们，而不必单独引用它们

• 确保您的代码格式与您的语义结构一致（有助于可读性）

• 避免匿名内联函数。参数列表中的内联函数会模糊代码的结构。如果你真的必须这样做，至少给他们一个名字，这样他们就不会在调试和分析时显示为“匿名函数”

感谢您在投入生产之前询问代码审查。如果有更多的人这样做，我们就不必归档这么多bug了

这可能会激励你。我不认为它起作用了。我并没有验证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
    }

});

。可滑动
{
显示：无；
}
$（document）.ready（函数documentReady（）
{
$（“.slidebutton”）。每个（附件滑块）；
函数attachSlide（）
{
$（此）。单击（幻灯片）；
}
功能幻灯片（活动）
{
var cb=$（event.target）.parent（）.children（'.age复选框'）；
如果（cb.val（）=“否”）
cb.parent（）.slideDown（“fast”）；//向下滑动效果
其他的
cb.parent（）.slideUp（“fast”）；//向上滑动效果
}
});

欢迎使用堆栈溢出！这个问题可能需要做一些工作。代码应该做什么？如果代码有错误，请描述它。如果代码有效但需要改进，那么问题就出在这里，而不是这里。在这种情况下，您可以标记您的帖子以引起版主的注意，并要求将其迁移。祝你好运看起来一些基本的CSS可能有用…或者您可以使用for循环。请迁移到代码审阅而不是向下投票。。。我们都曾经是初学者；）>@LishaNicole虽然您也可以定义一些返回处理程序的函数，并使用for循环对其进行循环和设置，但Thomas的想法更好。