jQuery performance | Avoid repeating code

Question

Note

I think I can explain this without a jsfiddle. I'll avoid to show the whole code because there is too much HTML with lots of classes that I would have to adapt to the example.

Also, excuse my bad English. I hope you understand me. Im learning.

The point is

I have some modules that overlays my interface when the user activates the respective button. I want all the modules do the same animation when opening.

How is it now?

Now I am repeating again and again the same code (below), but pointing to each module and its respective button... I'm a newb in terms of javascript but I know this is anti-performance... I feel like I can do it cleaner.

My doubt

Is there a way to make a function or something with this code to allow it to work for all the modules I want, without repeating it again and again?

$('#btn-moduleX, #close-moduleX').on('click', function(){
    $( "#btn-moduleX" ).toggleClass('layout-color-subBase');
    $( "#overlay-moduleX" ).toggleClass('overlay--hidden');

    var currentOpacity = $('.fx-appear-soft').css('opacity');
    $( ".fx-appear-soft" ).animate({
        'opacity': 1 - currentOpacity
    }, 300);
});

Sure. Use a class. <button class="someclass"> and attach a click to all of these buttons at the same time : $("button.someclass").click(... Then inside use $(this).toggleClass(... — Jeremy Thille
– Jeremy Thille, Commented Apr 30, 2015 at 14:02
If the code is identical each time, just attached to different elements, then write it as a jQuery extension/plugin/widget. Google "creating jQueryUI widets" and "extending jQuery". — iCollect.it Ltd
– iCollect.it Ltd, Commented Apr 30, 2015 at 14:03
You can try posting this here too: codereview.stackexchange.com — dmgig
– dmgig, Commented Apr 30, 2015 at 14:04
@JeremyThille then, how I select the module to open? How I attach each button to each module? — Eder Iraizoz
– Eder Iraizoz, Commented Apr 30, 2015 at 14:07
I would add some data to the button, like <button class="someclass" data-module="module1">. Then you access the data using moduleName = $(this).data('module'). — Jeremy Thille
– Jeremy Thille, Commented Apr 30, 2015 at 14:12

Andrew Surzhynskyi · Accepted Answer · 2015-04-30 14:13:46Z

1

Lets imagine your button was looking like this:

<a id="btn-moduleX" href="#">Button</a>

What we do is removing the id and adding the class name that will be the same for all the buttons and the data-module attribute, where we do write the related module name.

<a class="jsCloseModule" href="#" data-module="moduleX">Button</a>

new JavaScript code:

$('.jsCloseModule').on('click', function(){
    var moduleName = $(this).data('module');
    $( "#btn-" + moduleName ).toggleClass('layout-color-subBase');
    $( "#overlay-" + moduleName ).toggleClass('overlay--hidden');

    var currentOpacity = $('.fx-appear-soft').css('opacity');
    $( ".fx-appear-soft" ).animate({
        'opacity': 1 - currentOpacity
    }, 300);
});

This is just an example. Your application could be optimized much more, all that id's like "#btn-" + moduleName could be changed to classes too.

edited Apr 30, 2015 at 14:13

answered Apr 30, 2015 at 14:10

Andrew Surzhynskyi

2,7761 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eder Iraizoz Over a year ago

now I realize that when I open 2 modules, both they receive opacity 0 :( how could I make the opacity animation work in each module too?

Andrew Surzhynskyi Over a year ago

You could use selectors like this:

var moduleElement = $('#' + moduleName); var someModuleElement = moduleElement.find('.fx-appear-soft'); someModuleElement.animate(.animate({         'opacity': 1 - currentOpacity     }, 300)

Collectives™ on Stack Overflow

jQuery performance | Avoid repeating code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related