php - 使用 jquery 遍历 php 变量 div 类

Question

我在使用变量生成的 php div 类和 jQuery 来使用 fadeToggle() 功能时遇到了一些麻烦。我有两个问题。第一个包含要单击的链接，第二个包含有关链接的描述，我想在单击以显示和隐藏描述时向第一个 div 添加一个简单的 fadeToggle。但是，div 类是使用 php for 循环动态生成的。我有 12 个不同的链接和 12 个不同的描述，它们是使用 php for 循环从外部文件夹插入的。这是代码:

<?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; ?>

所以我在使用 jQuery 的 fadeToggle 时遇到了问题，因为我不知道如何遍历动态生成的 php div 类。如果我将 div 类更改为静态的东西，如“元素描述”，我尝试的脚本会导致在我单击任何链接时立即打开每个描述框。任何想法将不胜感激。

如果愿意，您可以查看该站点并亲自查看问题。
访问http://www.romanleykin.com/projects并向下滚动到“类(class)元素”部分以了解我要完成的工作。目前，该站点使用丑陋的 javascript 代码将 css 属性从隐藏更改为可见，但我想为此使用 jQuery。任何想法将不胜感激。提前致谢。

Answer 1

使用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; ?>

然后是JS代码:

$(function(){

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

        event.preventDefault();

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

    });

});

通过这种方式，您可以将每个 anchor 绑定(bind)到其相关的 div，而不会弄乱类。