如何重用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']);

或以每个按钮的点击操作为例。

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

Answer 2

你可以做类似下面的事情。 通过点击事件传递的事件参数包含大量信息。使用它和switch语句来确定你想要做什么。

＆＃13;

＆＃13;

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

  $('.firstbtn').click(clickHandler(event));            
  $('.second-btn').click(clickHandler(event));
});


function clickHandler(event){
  //event param will have all the details about who and what was clicked
   switch(/*event or something in event*/){ //switch over details of the event and manage them all here
   
   
   }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;