查找下一個/上一個元素

Question

我正在通過ajax從具有類.gameListing的div行中加載數據。 單擊其中一個div時，將添加一類.active並將相關數據加載到容器中，這一切都可以正常工作。

我想要的是一個上一個和下一個鏈接，用於找到下一個或上一個.gameListing並單擊它。

$('.gameListing').click(function(){

    $('.gameListing').removeClass('active');
    $(this).addClass('active');

    var id = $(this).attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});




function call_ajax(url) {

    $.ajax( {
            url: url,
            method: "GET",
            data: {json:  1},
            dataType: "JSON"
     })

        .done(function( data ) {

        // LOAD GAME INFORMATION
        $("#game-name").html(data.post.title);
        $("#game-reels").html(data.post.custom_fields.reels);
        $("#game-paylines").html(data.post.custom_fields.paylines);
        $("#game-minBet").html(data.post.custom_fields.min_bet);
        $("#game-maxBet").html(data.post.custom_fields.max_bet);
        $("#game-jackpot").html(data.post.custom_fields.jackpot);
        $("#game-info").html(data.post.custom_fields.game_info);

        // LOAD GAME PROVIDERS
        var provSource = new String(data.post.custom_fields.game_name);
                provSource = provSource.replace(/ /g,"-");
                $("#game_provs").load("http://localhost:8888/projects/superfreerespo/" + provSource + "/ .gameBox-Ops");

        // LOAD GAME THUMBNALS
        var gameThumbSrc = new String(data.post.custom_fields.game_name);
        gameThumbSrc = gameThumbSrc.replace(/ /g,'');

        $('#gameBoxGallery').html('');
            for(i = 0;  i<= 2; i++){
                            image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-' + i + '.jpg" class="gameThumb">'
                            $('#gameBoxGallery').append(image);
        };

        // ZOOM FIRST THUMBNAIL
        $('#gameBox-Screenshot').html('');
            image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-0' + '.jpg" id="gameScreenshot">'
        $('#gameBox-Screenshot').append(image);

        })  
}

Answer 1

這樣的事情怎么樣：

$('.prev').click(function(){

    var $current = $('.gameListing .active');
    $current.removeClass('active')
    $current.prev().addClass('active');

    var id = $current.prev().attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});

$('.next').click(function(){

    var $current = $('.gameListing .active');
    $current.removeClass('active')
    $current.next().addClass('active');

    var id = $current.next().attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});

更新

如果要使用通用函數：

$('.prev').click(function(){
     Navigate('previous');
});

$('.next').click(function(){
     Navigate('next');
});


function Navigate (direction){
    var $current = $('.gameListing .active');
    $current.removeClass('active')

    var secondItem = $current.next().addClass('active');
    if(direction == 'previous')
         secondItem = $current.prev().addClass('active');

    var id = secondItem.attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);

}

Answer 2

您可以從Jquery使用.next（）

以獲得更多詳細信息https://api.jquery.com/next/＆以前使用.prev（） https://api.jquery.com/prev/

Answer 3

如果您的.gameListing彼此不相鄰，這是一個解決方案（因此，如果next()和prev()無法使用）：

弄弄代碼段是否不起作用。

 jQuery.fn.reverse = function() { return this.pushStack(this.get().reverse(), arguments); }; function GameListing(el) { $('.gameListing').removeClass('active'); $(el).addClass('active'); var id = $(el).attr('data-id'); var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games"; //call_ajax(url); $('#result').text('URL: ' + url); } $('.gameListing').click(function () { GameListing(this); }); $('.prev').click(function () { var next = false; $('.gameListing').reverse().each(function () { if (next) { GameListing(this); return false; } if ($(this).hasClass('active')) { next = true; } }); }); $('.next').click(function () { var next = false; $('.gameListing').each(function () { if (next) { GameListing(this); return false; } if ($(this).hasClass('active')) { next = true; } }); }); function call_ajax(url) { // Your code here } 

 div { display:inline-block; border:1px solid black; padding:2px 5px; margin:0 5px; cursor:pointer; float:left; } div.active { background:green; } #result { background:red; display:block; float:left; clear:left; width:300px; text-align:center; margin:20px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="prev">&laquo;</div> <div class="gameListing" data-id="1">1</div> <div class="gameListing" data-id="2">2</div> <div class="gameListing" data-id="3">3</div> <div class="gameListing" data-id="4">4</div> <div class="next">&raquo;</div> <div id="result"></div> 

Answer 4

使用自定義數據屬性的簡單解決方案

var $current = $('.gameListing.active');
$current.removeClass('active')

var postNumber = parseInt($current.attr('data-count'));

var nextPost = (postNumber - 1);

$("[data-count='"+nextPost+"']").trigger("click");