Iterate through php variable div class using jquery

Question

I'm having a bit of trouble using variable generated php div classes and jQuery to use the fadeToggle() feature. I've got two elements in question. The first contains a link to click and the second contains a description about the link and I want to add a simple fadeToggle to the first div when clicked to show and hide the description. However, the div classes are dynamically generated using a php for loop. I've got 12 different links and 12 different descriptions that get inserted from outside folders using a php for loop. Here's the code:

<?php for ($i = 1; $i <= 12; $i++): ?> 
<p>
<a href="" onclick="return false" class="<?php echo "project$i-text-link-visible"; ?>">
    <span class="text-expand-symbol"></span>
     View project details:
</a>
</p>

<!-- PROJECT DESCRIPTION -->
<div class="<?php echo "project$i-description-hidden"; ?>">        
    <?php include 'descriptions/project' . $i . '.inc.html.php'; ?>
</div>  
<?php endfor; ?>

So i'm having trouble using jQuery's fadeToggle because I do not know how to iterate through the dynamically generated php div classes. If I change the div class to something static like "project-description", the script I tried causes every description box to open at once when I click on any of the links. Any ideas would be very much appreciated.

You can check out the site and see the problem for yourself, if you like.
Visit http://www.romanleykin.com/projects and scroll down to the "Class Projects" section to get an idea of what I'm trying to accomplish. Currently, the site uses an ugly javascript code that changes the css properties from hidden to visible, but I would like to use jQuery for this. Any ideas would be very much appreciated. Thanks in advance.

Please show (an SSCCE sample of) the rendered HTML. JavaScript doesn't work on PHP server-side scripts, only on what the browser sees client-side. — David Thomas
– David Thomas, Commented Aug 25, 2012 at 17:18

moonwave99 · Accepted Answer · 2012-08-25 17:41:12Z

1

Use custom data attributes:

<?php for ($i = 1; $i <= 12; $i++): ?> 

<a href="#" data-target="<?php echo $i ?>"> ... </a>

<div id="target_<?php echo $i ?>"> ... </div>

<?php endfor; ?>

Then the JS code:

$(function(){

    $('a[data-target]').on('click', function(event){

        event.preventDefault();

        $('#target_' + $(this).attr('data-target')).fadeToggle();

    });

});

This way you tie each anchor to its related div without messing with classes.

answered Aug 25, 2012 at 17:41

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

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

4 Comments

jacknone Over a year ago

Thank you very much, moonwave. That was perfect. It did it exactly. Could you direct me anywhere so I can learn a bit more about tying anchors to divs. This is the first I've heard of how to do that. Thanks again.

moonwave99 Over a year ago

You're welcome. I can't come with a proper resource right now - just mind that custom data attributes do not mess with html validness, so you can't use [but not abuse!] how many you want. Just ask on SO again whenever you need!

jacknone Over a year ago

I was also wondering how to attach them to the <span class=text-expand-symbol"></span> so that each time I click on it, the image (which is a background-image prop. in css) will change to a minus (another background-image jpeg)

jacknone Over a year ago

I just figured it out. HTML: <span class="text-expand-symbol" id="symbol_<?php echo $i; ?>"></span> and i added this line to your jQuery function: $('#symbol_' + $(this).attr('data-target')).toggleClass('text-hide-symbol'); });

Arun Poudel · Accepted Answer · 2012-08-25 17:31:05Z

1

The best solution is to add an extra class to the php generated tag, ie you a will have two classes:

class="something-common <?php echo $phpgenerated; ?>"

So basically you code will look like:

<?php for ($i = 1; $i <= 12; $i++): ?> 
<p>
<a href="" onclick="return false" class="project-link <?php echo "project$i-text-link-visible"; ?>">
    <span class="text-expand-symbol"></span>
     View project details:
</a>
</p>

<!-- PROJECT DESCRIPTION -->
<div class="project-description <?php echo "project$i-description-hidden"; ?>">        
    <?php include 'descriptions/project' . $i . '.inc.html.php'; ?>
</div>  
<?php endfor; ?>

And you can use the selector as:

$('a.project-link')
OR
$('.project-link', 'a')

edited Aug 25, 2012 at 17:31

answered Aug 25, 2012 at 17:25

Arun Poudel

6276 silver badges21 bronze badges

Comments

khaverim · Accepted Answer · 2012-08-25 17:40:00Z

0

If you run a similar loop with jQuery you should be able to assign the event handlers to the links in the same way you created them in PHP:

<script> 
for (i=1; i<=12; i++) 
{ $('.project' + i + '-text-link-visible').click(function()
  { 
    // use the fadeToggle() on the description <div> here
  });
}
</script>

edited Aug 25, 2012 at 17:40

answered Aug 25, 2012 at 17:32

khaverim

3,5945 gold badges38 silver badges47 bronze badges

Comments

kewlashu · Accepted Answer · 2012-08-25 19:17:51Z

0

You can do this without using dynamically generating classes or id in your tags.

See the link below, this should help

JS Bin demo

answered Aug 25, 2012 at 19:17

kewlashu

1,10911 silver badges19 bronze badges

Collectives™ on Stack Overflow

Iterate through php variable div class using jquery

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related