将索引添加到WordPress库中的项目

时间：2019-04-25 作者：Kevin Nugent

我正在使用[gallery] shortcode和Jetpack的平铺画廊功能。当用户单击图像时，我会触发一个旋转木马（Owl carousel）carousel.trigger( \'to.owl.carousel\', [ item_id, 0 ] ). 我遇到的问题是，我需要向触发器提供一个索引，以便它跳转到正确的项。我之前使用jQuery完成了这项工作index() 但这对平铺库不起作用，因为项目嵌套在行中。

我需要做的是添加data-index 属性设置为平铺图库中的每个项目，然后我可以将其与旋转木马中的索引相对应。有没有一种方法可以过滤库短代码输出，以便在循环遍历图像时添加此属性？

离题，但另一种解决方案可能是利用index() 为项目编制索引，而不考虑其嵌套行结构，如索引.item 与父容器的父容器的父容器的父容器相关的元素。这可能吗？

1 个回复
SO网友:Kevin Nugent

因此，我通过按类遍历所有项并使用数据属性对它们进行索引，解决了这个问题。

$( \'.tiled-gallery\').each(function(){

    var i = 0;

    $(this).find(\'.tiled-gallery-item\').each(function(){

        $(this).attr( \'data-index\', i );

        i++;
    })
})

标签： filters   shortcode   jquery   hooks   gallery   小码农  

相关推荐

Register jQuery - OOP WP

我发现this post 这似乎可以使Ajax脚本在OOP模型中工作。我发现通过类函数而不是其他文件添加脚本很有趣，这对我来说非常有用。但是，我无法将jQuery排入Wordpress的队列。我有一个错误：jQuery is not defined.这是我的代码：class fiche_content{ private $file_base; private $jenkins_url; function __construct($jenkins_