Question

I am working on getting assigning a dynamic variable within Jquery in which the buttons could change to be more or less so I figured a loop would be best. (that rimes oo god it’s gotten to be that fun). So here is the break down in which I can not seem to get to figured out.

$(".acc_trigger").each(function(j) {

    $("#accord" + j).click(function() {
        $(".selectedimg").hide('drop', { direction: 'down' }, 1000);
        $(".selectedimg").removeClass("selectedimg");

        $("#accordimg"+ j ).addClass("selectedimg");
        $("#accordimg"+ j ).show('drop', { direction: 'up' }, 1000);

  });
});

For each class which are buttons add a click in which the id has a number to the end of it which removes the class selected but then replaces with the same number used in the id above. I can’t get this to work and have thought about using loops but when I do it goes the same number of times the loop is for. I’m trying to just create a number of click functions that allows for the variable to be dynamic to make it so I can have more or less buttons.

Answer 1

You should be able to use jQuery’s live function to do this without having to use loops or anything.

$('.CssClassThatAllYourButtonsShare').live('click', function() {
        $(".selectedimg").hide('drop', { direction: 'down' }, 1000);
        $(".selectedimg").removeClass("selectedimg");

        //Extract the number from the current ID
        var j = $(this).attr('id').match(/\d+$/);

        $("#accordimg"+ j).addClass("selectedimg");
        $("#accordimg"+ j).show('drop', { direction: 'up' }, 1000);
});

Documentation on Live: http://api.jquery.com/live/

Description: Attach a handler to the
event for all elements which match the
current selector, now and in the
future.