Question

单击“下一步”链接时，尝试在标记为“活动”的链接后单击下一个“标记”链接。下面的示例html结构意味着我有限的jQuery知识.next不会起作用，因为标签元素不是兄弟。最终结果应该是点击下一个链接应该点击“披萨”这个词周围的链接。

<div class="wrapper"> <p>some <a href="#" class="tag">text</a>here and more <a href="#" class="tag">text</a></p> <p>some <a href="#" class="tag active">text</a>here</p> <p>some <a href="#" class="tag">pizza</a>here and more <a href="#" class="tag">text</a></p> <p>some <a href="#" class="tag">text</a>here and some more <a href="#" class="tag">text</a></p> </div> <div class="nav"> <a href="#" class="back">Back</a> <a href="#" class="next">Next</a> </div>

这样的东西只适用于一个段落

$(".next").click(function() { $(".active").next().click(); });

Answer 1

修改

如果要循环所有标记，可以为它们提供自定义属性以便于查找。

请参阅代码中的注释。

$(document).ready(function(){ // Get all tags. var tagCollection = $(".tag"); // Give them an "index" tagCollection.each(function(index){ //console.log( index ); $(this).attr("data-index",index); }); // Click handler $(".next").click(function() { // Get the index of the active tag +1 (for the next). var dataIndex = parseInt( $(".active").attr("data-index") )+1; //console.log(dataIndex); // If last index, back to the very first. if(dataIndex>tagCollection.length-1){ dataIndex = 0; } // Here, we remove the active class on the current tag // And find the next one to add the active class on it. // For that demo, I turned it to red. // You may click it! $(document).find(".active") // Find the active one. .removeClass("active") // Remove the class .closest(".wrapper") // climb up to the wrapper .find("[data-index='"+dataIndex+"']") // to find the next tag .addClass("active") // Give it the class .click(); // And click it! }); // Tag click handler $(".tag").click(function(){ console.log( $(this).text() ); }); });

.active{ color:red; font-weight:bold; text-decoration:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <p>some <a href="#" class="tag">text</a>here and more <a href="#" class="tag">text</a></p> <p>some <a href="#" class="tag active">text</a>here</p> <p>some <a href="#" class="tag">pizza</a>here and more <a href="#" class="tag">text</a></p> <p>some <a href="#" class="tag">text</a>here and some more <a href="#" class="tag">text</a></p> </div> <div class="nav"> <a href="#" class="back">Back</a> <a href="#" class="next">Next</a> </div>

在整页中运行此代码段;）
我相信你可以在“后退”链接上应用相同的逻辑。

Answer 2

这就是为.back，.next和.tag元素提供特定行为。

为了保持代码的有序性，使用事件处理程序完成所有事情是有利的，包括为了方便和可重用，自定义事件处理程序如下：

a＆＃39; findPrev＆＃39;事件处理程序，用于查找集合中的上一个标记，
a＆＃39; findNext＆＃39;事件处理程序，用于查找集合中的下一个标记。

$(document).ready(function() {
    $(".nav .back").on('click', function(e) {
        e.preventDefault();
        if(this.href) { $(".wrapper .active").triggerHandler('findPrev').click(); }
    });
    $(".nav .next").on('click', function(e) {
        e.preventDefault();
        if(this.href) { $(".wrapper .active").triggerHandler('findNext').click(); }
    });

    $(".tag").on('findPrev', function() { // <<< custom event handler
        var $tags = $(this).closest('.wrapper').find('.tag');
        var index = $tags.index(this);
        return (index > 0) ? $tags.eq(index - 1) : $();
    }).on('findNext', function() { // <<< custom event handler
        var $tags = $(this).closest('.wrapper').find('.tag');
        var index = $tags.index(this);
        return (index < $tags.length) ? $tags.eq(index + 1) : $();
    }).on('click', function(e) {
        e.preventDefault();
        $(".wrapper .tag").filter(".active").removeClass('active').end().filter(this).addClass('active'); // move the 'active' highlight
        // desired click action here
    }).filter(".active").trigger('click');
});

<强> Demo

一旦你了解了这一点，作为奖励，添加一些额外的行以启用/禁用Back和Next按钮作为回报是相对微不足道的单击标签。这可以包括一些更自定义的事件处理程序：

a＆＃39;启用＆＃39; Back和Next元素的事件处理程序，
a＆＃39;禁用＆＃39; Back和Next元素的事件处理程序。

$(document).ready(function() {
    $(".nav .back").on('click', function(e) {
        e.preventDefault();
        if(this.href) { $(".wrapper .active").triggerHandler('findPrev').click(); } // find previous tag and 'click' it.
    });
    $(".nav .next").on('click', function(e) {
        e.preventDefault();
        if(this.href) { $(".wrapper .active").triggerHandler('findNext').click(); } // find next tag and 'click' it.
    });
    $(".nav .back, .nav .next").on('enable', function() { // <<< custom event handler
        $(this).attr('href', '#'); // enable
    }).on('disable', function() { // <<< custom event handler
        $(this).removeAttr('href'); // disable
    });

    $(".tag").on('findPrev', function() { // <<< custom event handler
        var $tags = $(this).closest('.wrapper').find('.tag');
        var index = $tags.index(this);
        return (index > 0) ? $tags.eq(index - 1) : $();
    }).on('findNext', function() { // <<< custom event handler
        var $tags = $(this).closest('.wrapper').find('.tag');
        var index = $tags.index(this);
        return (index < $tags.length) ? $tags.eq(index + 1) : $();
    }).on('click', function(e) {
        e.preventDefault();
        $(".wrapper .tag").filter(".active").removeClass('active').end().filter(this).addClass('active'); // move the 'active' highlight
        $(".nav .back").trigger($(this).triggerHandler('findPrev').length ? 'enable' : 'disable'); // manage the back button
        $(".nav .next").trigger($(this).triggerHandler('findNext').length ? 'enable' : 'disable'); // manage the next button
        // desired click action here
    }).filter(".active").trigger('click'); // trigger 'click' to initialize everything
});

<强> Demo

注意：

使用.trigger()和.triggerHandler()可能会造成混淆。不同之处在于返回的内容。 .trigger()总是返回jQuery（用于链接），而.triggerHandler()返回处理程序返回的任何内容。
使用Back和Next的HTML <button>元素而不是超链接，会略微简化。可以固有地禁用/启用适当的按钮，而不会使用href属性搞乱。
自定义事件也可以用作jQuery插件，这是可行的，但可以说是简单功能的顶层。

找到非兄弟的下一个元素

2 个答案: