CODEWITHSUNDEEP
javascripthtml
Avid
Avid

Reputation: 173

How to reuse the JavaScript function in order to avoid repeating the same lines of code?

I'm a beginner to JavaScript. The lines of code that I've written in JavaScript are working for individual actions that happens in the HTML part but I want to make it as a single function which can handle all the cases actions that happens in the HTML part.

How to make one JavaScript function which can be used for different separate actions which has similar lines of code but different HTML classes?

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

Upvotes: 0

Views: 423

Answers (2)

Jimenemex
Jimenemex

Reputation: 3166

First off, You have to clean up your code. Everything there can be written in one $(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();
     });
});

Second, You can pass parameters to functions that happen often. For example

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

Call it like this, passing in the classes to be hidden as an array.

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

or take for example the click action of each button.

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

So your $('.firstbtn_replace').click() can be this

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

The same goes for $('.secondbtn_replace').click()

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

You can do the same for $('.firstbtn').click() and $('.secondbtn').click()

The ending result will be 

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

Or instead of writing the classes each time you can the function, you can pass in the jQuery object itself.

Ending in this as a final result.

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

Upvotes: 2

rjustin
rjustin

Reputation: 1439

You could do something similar to below. the event parameter that gets passed with a click event has a plethora of information. Use it and a switch statement to determine what you want to do.

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

Upvotes: 1

Related Questions