How to tell JavaScript function which id to get from a PHP while loop?

Question

I have a JavaScript function which toggles a div to show/hide, it works if I just have the one link that toggles the single div. But I have a while loop which creates several of these links and div, one for each row. But only the first link works. I can add a $ at end of my id for both the toggle link and div, how do I tell JavaScript to look for this variable?

JavaScript:

$(function(){
    var id = document.getElementById();
    $('#toggleDiv').click(function(){
        $('#targetDiv').toggle();
    });
});

PHP:

echo "<a href=\"javascript:void(0);\" id=\"toggleDiv$ctr\">;
echo "<div id=\"targetDiv$ctr\" style=\"display:none;\">";

As you can see, the $ctr helps individualize each link and div, but I need java to identify which #toggleDiv is being clicked, allowing it to toggle the correct #targetDiv.

Any help?

AllInOne · Accepted Answer · 2013-01-02 23:05:37Z

1

'You don't need for all these elements to have their own IDs if you structure your html and jQuery selectors correctly; they can just all share classes.

Something like this could work in a parent/child set up:

 $(".question").click(function() {
    $(this).parent().children(".answer").toggle();
  });

PHP

echo '<div class="some-parent">';
echo '<a href="javascript:void(0);" class="question">question</a>';
echo '<div class="answer" style="display:none;">';
echo 'answer';
echo '</div>';

Here is a fiddle: http://jsfiddle.net/VPCcZ/1/

Or like this in a "next" situation:

jQuery('.question').click(function(){
    if ($(this).next().css("display") == "none") {
      $(this).next().attr('style', 'display: block !important');
    } else {
      $(this).next().attr('style', 'display: none !important');
    }
  });

PHP

echo '<a href="javascript:void(0);" class="question">';
echo '<div class="answer" style="display:none;">';

edited Jan 2, 2013 at 23:05

answered Dec 26, 2012 at 21:51

AllInOne

1,4502 gold badges14 silver badges32 bronze badges

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

4 Comments

Geo Over a year ago

why jQuery() and not the $() alias?

AllInOne Over a year ago

No good reason, copied from an no-conflict solution of mine. Fixed.

Omair Vaiyani Over a year ago

i tried your both your set up, but neither seem to work - should the "answer" div have to be within the parent div or outside?

AllInOne Over a year ago

@OmairVaiyani I've updated my answer with a small fix and a link to a working fiddle.

cdhowie · Accepted Answer · 2012-12-26 21:46:03Z

A naive and inefficient, but usable approach would be something like this:

var i = 0;
while ($('#toggleDiv' + i).length) {
    (function () {
        // Copy the iteration variable, otherwise all of the links will toggle
        // the *last* targetDiv instance!
        var copy = i;

        $('#toggleDiv' + copy).click(function () {
            $('#targetDiv' + copy).toggle();
        });
    })();

    ++i;
}

A better approach would be to tag all of the toggle link divs with the same CSS class, then apply the same click handler to all of them ($('.toggle-link').click(...)). This handler should look at the target element's ID and extract the number, then find the matching targetDiv instance and toggle it. With that approach, you would have exactly one event handler registered.

With the approach I've given in code, you will have one event handler for each toggle div and this may cause memory issues in the browser if you have thousands of such links. For a small number of links it's probably fine, but consider a different approach if you may wind up with many links.

JB Nizet · Accepted Answer · 2012-12-26 21:46:10Z

0

Add a click event listener to all the links whose id attribute starts with toggleDiv. In the event handle function, extract the substring after toggleDiv, look for the div having the ID targetDiv<extracted_number>, and toggle it:

$('a[id^=toggleDiv]').click(function() {
    var id = $(this).attr('id');
    var number = id.substring('toggleDiv'.length);
    $('#targetDiv' + number).toggle();
});

answered Dec 26, 2012 at 21:46

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

1 Comment

Lightness Races in Orbit Over a year ago

The ID won't actually contain $ -- it is the beginning of the OP's PHP variable.

Collectives™ on Stack Overflow

How to tell JavaScript function which id to get from a PHP while loop?

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related