Question

我有动态加载内容（在WordPress中使用新的WP_query循环）用于jQuery轮播或图像滚动功能 - 其中图像滚动是图像的列表，样式看起来像一条图像。

当图像滚动正常工作时，li标签中的一个图像有一个活动类，它会扩展图像并使其看起来像是在其他图像的前面，

...当用户点击此条图片时，活动类会更改/移动到目标li标记，从而展开该图像。

发生的事情是，当页面加载时，没有一个li标签处于活动状态 - 因为内容是通过WP循环动态的（我不希望所有的li标签都以活动开始class，所以我没有把它添加到循环中），

...所以图像只是排列成一致的条带，而不是其中一个图像被展开（或者有活动类）。

仅当用户碰巧点击其展开的其中一个图片时

...但我需要在用户点击之前展开其中一个图片（以使其具有活动类），因此我需要在页面加载后添加活动类。 < / p>

我已尝试通过jQuery代码定位其中一个li标记，以便在页面加载后使用filter()或closest()添加活动类，但这并不起作用。< / p>

或许我应该编写一个新脚本来添加活动类？

非常感谢任何帮助！

我在下面有缩写的html和jQuery函数。

_Cindy

ps如代码所示，我也有相应的文章标题与图像一起滚动，所以也许我也需要在那里调整jQuery。

    <div class="articles-scroll">

<ul class="images-scroll">
    <li><!-- I need only one of these tags to have a class of active to start -->

        <a href="#">
            <span class="set-image-border" style="float: none;">
               <img class="setborder" src="image-set-by-new-wp_query">
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="set-image-border">
               <img class="setborder" src="image-set-by-new-wp_query">
            </span>
        </a>
    </li>
</ul>

<div class="clear-float"></div>

<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->

        <div class="wrapper">

<ul class="images-content">
    <li>
            <div class="article-header">
                <h2>
                    <a href="link-set-by-new-wp_query">
                </h2>
            </div>
        </div>
    </li>
    <li>
        <div class="wrapper">
            <div class="article-header">
                <h2>
                    <a href="link-set-by-new-wp_query">
                </h2>
            </div>
        </div>
    </li>
</ul>

</div>


    jQuery(".images-scroll li a").click(function() {
    jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
    jQuery(this).parent().addClass("active");
    jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
    jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
    var step = ((-250)*(jQuery(this).parent().index()-1))-60;
    //alert(step);
    jQuery(this).parent().parent().css("margin-left", step+"px");
    return false;
});

Answer 1

您编写的代码不起作用的原因是您在单击处理程序中使用它，因此在您单击其中一个目标元素之前不会发生任何事情。如果您希望在页面加载时发生某些事情，可以使用$(document).ready()（可以缩写为$()）或$(window).load()。只需在现有代码的下方或上方添加以下行。

jQuery(function(){
    var $listItems = jQuery('.images-scroll li');
    $listItems.first().addClass('active');
    // Second list item
    $listItems.eq(1).addClass('active');
    // Third list item
    $listItems.eq(2).addClass('active');
});

此外，请注意（除非它与其他插件冲突），编写$的时间比jQuery短，并且它也应该这样做。

JQuery - 设置＆＃34;活跃＆＃34;图像滚动的类

1 个答案: