multiple instances of the same jquery script

Question

if i have a script but it needs to run multiple times on a page, like in a cms for example, how do you approach this? in one experiment i had the code run multiple times but i put the article id on the end of the selectors that would fire off commands and what needed to be manipulated. it's not a good workaround though cause there's too much duplication of code (even though it works).

here is the example that i got help with in a recent stack overflow discussion (with the article ids appended(textpattern)):

<script type="text/javascript">
    $(document).ready(function() {
        $('.fullTracksInner<txp:article_id />').hide();
        $('.tracklist<txp:article_id />').click(function() {
            $('.fullTracksInner<txp:article_id />').slideToggle('medium');
            if ($('.fullTracksInner<txp:article_id />').is(':hidden')) {
                $(this).text('Show Tracklist');
            } else {
                $(this).text('Hide Tracklist');
            }
        });
    });
</script>

just imagine for example three slideshows on a page using the same slideshow script.

You may be able to generalize the script but maintain the functionality for each independently if they share a common structure or class setup. Can we see your html? — g.d.d.c
– g.d.d.c, Commented Jul 26, 2010 at 3:00
sure, the html that is being affected looks like: <div class="fullTracks"> <div class="fullTracksInner<txp:article_id />"> <p><txp:body /></p> </div> </div>  <p><a href="#activity" class="tracklist<txp:article_id />">View Tracklist</a></p> — mrtunes
– mrtunes, Commented Jul 26, 2010 at 3:15

chromaloop · Accepted Answer · 2010-08-25 01:47:48Z

2

This is a relatively common task to do in jQuery. In order for this to work for multiple elements on the same page without requiring unique IDs, you just need to use $(this) in order to define the relative element you're acting on. I don't know what you're markup looks like, but you could probably do something like the following:

$(document).ready(function() {
 $('.fullTracksInner<txp:article_id />').hide();

    $('.tracklist<txp:article_id />').click(function() {
     $(this).children('.fullTracksInner<txp:article_id />').slideToggle('medium');
        if ( $(this).children('.fullTracksInner<txp:article_id />').is(':hidden') ) {
            $(this).text('Show Tracklist');
        } else {
            $(this).text('Hide Tracklist');
        }
    });
});

You should probably modify your selectors a little though, I would think that $('.tracklist<txp:article_id />') might choke in some browsers.

answered Aug 25, 2010 at 1:47

chromaloop

2225 silver badges11 bronze badges

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

2 Comments

mrtunes Over a year ago

thanks this looks better, by adding in more use of $this as for the selectors, the txp:article_id thing just becomes a number after the cms parses it.

chromaloop Over a year ago

I don't fully understand how your CMS parses the code, but for your selector, I would recommend trying something like $("div[class^='tracklist']");

rebelliard · Accepted Answer · 2010-07-26 02:58:17Z

0

You could extract the repeating code to standard JavaScript methods and then call them wherever desired.

<script type="text/javascript">
function performSlide(tracklist) {
    var fulltracks = $('.fullTracksInner<txp:article_id />');

    $(fulltracks).slideToggle('medium');
    if (fulltracks).is(':hidden')) {
        changeText(tracklist, 'Show Tracklist');
    } else {
        changeText(tracklist, 'Hide Tracklist');
    } 
}

function changeText(textbox, text) {
    textbox.text(text);
}

$(document).ready(function() {
    var tracklist = $('.tracklist<txp:article_id />');

    tracklist.click(function() {
        performSlide(tracklist);
    });

    $('.someRadioButton').change(function() {
        performSlide(tracklist); 
    });
});
</script>

answered Jul 26, 2010 at 2:58

rebelliard

9,6217 gold badges49 silver badges80 bronze badges

1 Comment

mrtunes Over a year ago

thank you - this probably wouldn't get around the problem though of having to make unique IDs for every instance. i saw this thread come up on the sidebar which might be more along the lines of what i'm wondering about: stackoverflow.com/questions/2082218/…

Collectives™ on Stack Overflow

multiple instances of the same jquery script

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related