查找下一个/上一个元素

Question

I am loading data via ajax from a row of divs with a class of .gameListing. When one of the divs is clicked it has a class of .active added and loads the relative data into a container, this is all working perfectly.

What I would like is to have a Previous & Next link which finds the next or prev .gameListing and clicks it.

$('.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

How about something like this:

$('.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);
});

UPDATE

If you want to use a generic function:

$('.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

You can use .next() from Jquery

for more detail https://api.jquery.com/next/ & for Previous use .prev() https://api.jquery.com/prev/

Answer 3

Here's a solution for if your .gameListing are not next to eachother (so if next() and prev() won't work):

Fiddle for if the code snippet doesn't work.

 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

Simple solution using custom data attribute

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

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

var nextPost = (postNumber - 1);

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