使用 jquery 遍历 php 变量 div 类答案

【问题标题】：Iterate through php variable div class using jquery使用 jquery 遍历 php 变量 div 类
【发布时间】：2012-08-20 21:12:14
【问题描述】：

我在使用变量生成的 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。任何想法将不胜感激。提前致谢。

【问题讨论】：

请显示（SSCCE 示例）呈现的 HTML。 JavaScript 不适用于 PHP 服务器端脚本，仅适用于浏览器看到的客户端脚本。

标签： php jquery html css

【解决方案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();

    });

});

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

【讨论】：

非常感谢你，月波。那是完美的。它确实做到了。你能指导我到任何地方，这样我就可以了解更多关于将锚点绑定到 div 的知识。这是我第一次听说如何做到这一点。再次感谢。
不客气。我现在无法提供适当的资源 - 请注意自定义数据属性不会混淆 html 有效性，因此您不能使用 [但不要滥用！] 你想要多少。只需在需要时再次询问！
我还想知道如何将它们附加到以便每次单击它时，图像（这是背景- image prop. in css) 将变为减号（另一个背景图像 jpeg）
我刚刚想通了。 HTML：我将此行添加到您的 jQuery 函数中： $('#symbol_' + $ (this).attr('data-target')).toggleClass('text-hide-symbol'); });

【解决方案2】：

最好的解决方案是在 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')

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

您无需在标签中使用动态生成的类或 id 即可做到这一点。

查看下面的链接，这应该会有所帮助

JS Bin demo

【讨论】：