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类更改为像“project-description”这样的静态类，我尝试的脚本会在单击任何链接时立即打开每个描述框。任何想法都会非常感激。

如果您愿意，可以查看网站并自行查看问题。
访问http://www.romanleykin.com/projects并向下滚动到“课程项目”部分，了解我正在努力完成的任务。目前，该网站使用一个丑陋的javascript代码，将css属性从隐藏更改为可见，但我想使用jQuery。任何想法都将非常感激。提前谢谢。

Answer 1

最好的解决方案是在php生成的标签中添加一个额外的类，即你将有两个类：

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

所以基本上你的代码看起来像是：

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

您可以将选择器用作：

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

Answer 2

使用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();

    });

});

这样你就可以将每个锚点绑定到相关的div而不会弄乱类。

Answer 3

如果你使用jQuery运行一个类似的循环，你应该能够像在PHP中创建它们一样将事件处理程序分配给链接：

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

Answer 4

您可以在不使用动态生成代码中的类或ID的情况下执行此操作。

请参阅下面的链接，这应该有帮助

JS Bin demo

使用jquery遍历php变量div类

4 个答案: