使用jquery遍历php变量div类

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.

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.

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')

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>

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

See the link below, this should help

JS Bin demo