0

我有以下代码。如何在此处使用“或”运算符来缩短代码？

    $(document).ready(function() {  
        $("#id_event_type_1").click(function(){
            $("#id_end_date").show();
            $('label[for="id_end_date"]').show();
        });
    });

    $(document).ready(function(){
        $("#id_event_type_2").click(function(){
            $("#id_end_date").show();
            $('label[for="id_end_date"]').show();
        });
    });

    $(document).ready(function() {
        $("#id_event_type_3").click(function(){
            $("#id_end_date").show();
            $('label[for="id_end_date"]').show();
        });
    });
4

6 回答 6

1

您可以使用 jQuery以 ^=选择器开头。

$(document).ready(function() {

    $("[id^=id_event_type]").click(function(){
        $("#id_end_date").show();
        $('label[for="id_end_date"]').show();
    });


}); //END $(document).ready()

以选择器开头的工作方式如下：$([attribute ^= string])，允许您指定以id或class或或name或以??指定字符串开头的所有元素。

当使用以 开头时，您还可以像这样拆分出点击元素的特定属性字符串：

jsFiddle在这里

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
            div {height:100px; width:100px; margin:20px;}
        </style>

        <script type="text/javascript">
$(document).ready(function() {

    $("[id^=id_event_type]").click(function(){
        var myid = $(this).attr('id');
        var num = myid.split('_')[3];
        alert('You clicked on: ' +myid+ ', which is number ' +num);
        $("#id_end_date").show();
        $('label[for="id_end_date"]').show();
    });


}); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="id_event_type_1" style="background-color:red"></div>
    <div id="id_event_type_2" style="background-color:blue"></div>
    <div id="id_event_type_3" style="background-color:green"></div>

</body>
</html>

最后一点。您不需要将每个例程都包含在其自己的 (document).ready() 函数中。您只需要一个，然后可以在其中列出每个例程，一个接一个。

$(document).ready(function() {  
    $("#id_event_type_1").click(function(){
        $("#id_end_date").show();
        $('label[for="id_end_date"]').show();
    });

    $("#id_event_type_2").click(function(){
        $("#id_end_date").show();
        $('label[for="id_end_date"]').show();
    });

    $("#id_event_type_3").click(function(){
        $("#id_end_date").show();
        $('label[for="id_end_date"]').show();
    });
}); //END document.ready()
于 2013-07-31T17:23:49.480 回答
1

因为他们似乎做同样的事情：

$(document).ready(function() {
    $("#id_event_type_1,#id_event_type_2,#id_event_type_3").click(function(){
        $("#id_end_date").show();
        $('label[for="id_end_date"]').show();
    });
});
于 2013-07-31T17:21:52.567 回答
1

这个怎么样？

$(function() {
    for (var x = 1; x <= 3; x++) {
        $("#id_event_type_" + x).click(function(){
            $("#id_end_date").show();
            $('label[for="id_end_date"]').show();
        });
    }
});

我不知道您的标记是什么样的，但是仅更改循环结束编号比继续添加到该字符串更容易（再输入几个条目后就很难看）。

于 2013-07-31T17:22:12.863 回答
0 
$(function() {  
    $('[id^=id_event_type_]').click(function(){
        $("#id_end_date").show();
        $('label[for="id_end_date"]').show();
    });
});
于 2013-07-31T17:25:16.593 回答
0

您只需要 1 个 document.ready 事件，无需重复。另外，我会考虑给这些项目一个类，并简单地为你的点击事件使用一个类选择器。

$(document).ready(function () {

    $(".eventType").click(function(){
        /* do whatever */
    });

});
于 2013-07-31T17:51:35.117 回答
0 
$(document).ready(function() {  
    $("#id_event_type_1, #id_event_type_2, #id_event_type_3").click(function(){
        $("#id_end_date").show();
        $('label[for="id_end_date"]').show();
    });
});
于 2013-07-31T17:22:43.887 回答