3

我在使用变量生成的 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并向下滚动到“课堂项目”部分，以了解我想要完成的工作。目前，该站点使用丑陋的 javascript 代码将 css 属性从隐藏更改为可见，但我想为此使用 jQuery。任何想法将不胜感激。提前致谢。

4

4 回答 4

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')
于 2012-08-25T17:25:02.903 回答
1

使用自定义数据属性：

<?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 绑定，而不会弄乱类。

于 2012-08-25T17:41:12.610 回答
0

如果您使用 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>
于 2012-08-25T17:32:32.730 回答
0

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

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

JS Bin 演示

于 2012-08-25T19:17:51.830 回答