Question

我对jquery很新，并且想知道是否有人可以推荐一些我可以将这些功能组合在一起的方法，以便代码更高效，更精简。我基本上有两个单击功能，完全相同的东西，但目标是两个不同的按钮。谢谢。

        $( ".step1 button" ).click(function() {     
            if ($(".step1 input").is(":checked")) { 
                $( ".step1").slideUp("slow",function(){
                    $(".step2").slideDown("slow");
                });
            } // end if
            else{
                $("div.error").remove();
                $(".step1.step-heading").append("<div class='error'><i class='fa fa-exclamation-triangle'></i> Please make a selection before continuing</div>");
            } // end else         
        })// end click function

        $( ".step2 button" ).click(function() {     
            if ($(".step2 input").is(":checked")) { 
                $( ".step2").slideUp("slow",function(){
                    $(".step3").slideDown("slow");
                });
            } // end if
            else{
                $("div.error").remove();
                $(".step2.step-heading").append("<div class='error'><i class='fa fa-exclamation-triangle'></i> Please make a selection before continuing</div>");
            } // end else         
        })// end click function

Answer 1

您可以使用透气处理程序中的$(this)来访问触发事件的DOM元素。

因此，您只需将相同的处理程序附加到多个元素，并在处理程序的实现中使用$(this)。

$(".step1 button").add(".step2 button").click(function() {
    // $(this) refered to the button tha triggered the event
}

为了便于查找步骤编号，您可以使用自定义＆＃34;数据 - ＆＃34;属性，例如：

<button data-step-no="1">

您可以使用$(this).attr('data-step-no')获取该属性，事实上，要添加或减去，您需要像这样解析它：var stepno = parseInt($(this).attr('data-step-no')。

要选择具有单个选择器的所有按钮，您可以使用如下按钮：

<button data-step-no="1" class="step">
<button data-step-no="2" class="step">

Ans只需一步即可选择它们：

$('button .step').click(...

Answer 2

这是一个简单的重构，不需要更改HTML：

$('[class^="step"]').each(function(k, v) {
    var $btn       = $(v).find('button'),
        $input     = $(v).find('input'),
        $next      = $(v).next(),
        $heading   = $(v).find('.step-heading'),
        error_html = "<div class='error'><i class='fa fa-exclamation-triangle'></i> Please make a selection before continuing</div>";

    $btn.click(function(e) {
        if ($input.is(':checked')) {
            $(v).slideUp('slow', function() {
                $next.slideDown('slow');
            });
        } else {
            $('div.error').remove();
            $heading.append(error_html);
        }
    });
});

结合jquery点击功能

2 个答案: