Question

我通过ajax从一行带有.gameListing类的div加载数据。当点击其中一个div时，它会添加一个.active类并将相关数据加载到容器中，这一切都完美无缺。

我想要的是拥有一个Previous＆amp;下一个链接找到下一个或上一个.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/＆amp;供以前使用.prev（） https://api.jquery.com/prev/

Answer 3

如果.gameListing不是彼此相邻（如果next()和prev()不起作用），这是一个解决方案：

如果代码段不起作用，请

Fiddle。

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");

查找下一个/上一个元素

4 个答案: