javascript - 如何重用JavaScript函数以避免重复相同的代码行？

Question

我是 JavaScript 初学者。我用 JavaScript 编写的代码行适用于 HTML 部分中发生的各个操作，但我希望将其作为单个函数来处理 HTML 部分中发生的所有情况操作。

如何创建一个 JavaScript 函数，该函数可用于具有相似代码行但不同 HTML 类的不同单独操作？

HTML -

<div class="first" class="row">
    <div>
        <div class="first1">
            <img class="first_img" src="assets/imgs/01.png"/>
        </div>
        <div class="first2">
            <h4 class="first_title"><b> life... </b></h4>
            <p class="first_content"> thinking, feelings, emotions, meanings, and values. </p>
            <button class="btn"> <img src="assets/imgs/Icons-06.png"> </button>
            <button class="btn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
        </div>
</div>
</div>

<div class="second" class="row">
    <div class="second1">
        <div class="second2">
            <div class="second_title">
                <h5><b> questions... </b></h5>
            </div>
            <div class="second_content" style="">
                <div>
                    <p> Human thinking involves asking questions and getting answers. 
                    </p>
                </div>
                <button class="second-btn" style=""> <img src="assets/imgs/Icons-06.png"> </button>
                <button class="secondbtn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
            </div>
        </div>
    </div>
    <div>
        <img class="second_img" src="assets/imgs/02.png" style="" />
    </div>
</div>

Javascript -

    $(document).ready(function () {
                 $('.firstsub').hide();
                 $('.second-sub').hide();

                 $('.firstbtn').click (function (event)
                        {
                            $('.firstsub').toggle('show');
                        });

                // if (javascript(window).width() > 500) {               
                 $('.second-btn').click (function (event)
                        {
                            $('.second-sub').toggle('show');               
                        });
                });

    $(document).ready(function () {
                $('.firstbtn_replace').hide();
                $('.secondbtn_replace').hide();


             $('.firstbtn').click (function (event)
                    {
                        $('.firstbtn').addClass('hide');
                        $('.firstbtn_replace').show();
                    });

                $('.firstbtn_replace').click (function (event)
                    {
                        $('.firstsub').toggle('show');
                        $('.firstbtn').removeClass('hide');
                        $('.firstbtn_replace').hide();
                    });

            // if (javascript(window).width() > 500) {
             $('.second-btn').click (function (event)
                    {
                        $('.second-btn').addClass('hide');
                        $('.secondbtn_replace').show();
                    });

                $('.secondbtn_replace').click (function (event)
                    {
                        $('.second-sub').toggle('show');
                        $('.second-btn').removeClass('hide');
                        $('.secondbtn_replace').hide();
                    });
});

Answer 1

首先，您必须清理代码。所有内容都可以写在一个 $(document).ready()

中

$(document).ready(function () {
    $('.firstsub').hide();
    $('.second-sub').hide();
    $('.firstbtn_replace').hide();
    $('.secondbtn_replace').hide();
    $('.firstbtn').click (function (event) {
       $('.firstsub').toggle('show');
       $('.firstbtn').addClass('hide');
       $('.firstbtn_replace').show();
    });
    $('.firstbtn_replace').click (function (event) {
        $('.firstsub').toggle('show');
        $('.firstbtn').removeClass('hide');
        $('.firstbtn_replace').hide();
    });

    // if (javascript(window).width() > 500) {
     $('.second-btn').click (function (event) {
            $('.second-sub').toggle('show');               
            $('.second-btn').addClass('hide');
            $('.secondbtn_replace').show();
     });
     $('.secondbtn_replace').click (function (event) {
         $('.second-sub').toggle('show');
         $('.second-btn').removeClass('hide');
         $('.secondbtn_replace').hide();
     });
});

其次，您可以将参数传递给经常发生的函数。例如

function hideClasses(classes) {
    for(var i = 0; i < classes.length; i++ ) {
        $(classes[i]).hide();
    }
}

像这样调用它，将要隐藏的类作为数组传递。

hideClasses(['.firstsub', '.second-sub']);

或者以每个按钮的点击 Action 为例。

function buttonClicked(class) {
    $(class).toggle('show');
    $(class).removeClass('hide');
    $(class).hide();
}

所以你的$('.firstbtn_replace').click()可以是这样的

$('.firstbtn_replace').click (function (event) {
    buttonClicked('.firstbtn_replace');
});

同样适用于$('.secondbtn_replace').click()

$('.secondbtn_replace').click (function (event) {
    buttonClicked('.firstbtn_replace');
});

您可以对 $('.firstbtn').click() 和 $('.secondbtn').click() 执行相同的操作

最终结果是

$(document.ready(function() {
    function hideClasses(classes) {
        for(var i = 0; i < classes.length; i++ ) {
            $(classes[i]).hide();
        }
    }
    function replaceButtonClicked(className) {
        $(className).toggle('show');
        $(className).removeClass('hide');
        $(className).hide();
    }
    function normalButtonClicked(className) {
        $(className).toggle('show');
        $(className).addClass('hide');
        $(className).hide();  
    }

    hideClasses(['.firstsub', '.second-sub', '.firstbtn_replace', '.secondbtn_replace']);

    $('.firstbtn').click (function (event) {
        normalButtonClicked('.firstbtn');    
    }
    $('.secondbtn').click (function (event) {
        normalButtonClicked('.secondbtn');    
    }
    $('.firstbtn_replace').click (function (event) {
        normalButtonClicked('.firstbtn_replace');    
    }
    $('.secondbtn_replace').click (function (event) {
        replaceButtonClicked('.secondbtn_replace');    
    }
});

或者，您可以传入 jQuery 对象本身，而不是每次调用函数时都编写类。

最终结果以此结束。

$(document.ready(function() {
    function hideClasses(classes) {
        for(var i = 0; i < classes.length; i++ ) {
            $(classes[i]).hide();
        }
    }
    // obj refers to the jQuery object the clicked was called on
    function replaceButtonClicked(obj) {
        obj.toggle('show');
        obj.removeClass('hide');
        obj.hide();
    }
    // obj refers to the jQuery object the clicked was called on
    function normalButtonClicked(class) {
        obj.toggle('show');
        obj.addClass('hide');
        obj.hide();  
    }

    hideClasses(['.firstsub', '.second-sub', '.firstbtn_replace', '.secondbtn_replace']);

    // this refers to the jQuery object the clicked was called on
    $('.firstbtn').click (function (event) {
        normalButtonClicked(this);    
    }
    // this refers to the jQuery object the clicked was called on
    $('.secondbtn').click (function (event) {
        normalButtonClicked(this); 
    }
    // this refers to the jQuery object the clicked was called on
    $('.firstbtn_replace').click (function (event) {
        normalButtonClicked(this); 
    }
   // this refers to the jQuery object the clicked was called on 
    $('.secondbtn_replace').click (function (event) {
        replaceButtonClicked(this); 
    }
});