查找下一个/上一个元素(Find Next / Previous Element)
我通过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); }) }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); }) }最满意答案
这样的事情怎么样：
$('.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
如果要使用通用函数：
$('.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); }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); }更多推荐
发布评论