下一个和上一个在jQuery数组 [英] Next and previous in jQuery array

问题描述

所以我有一个jQuery数组与其中的图像URL：

  var images = [link1，link2 ，etc，etc]; 
  

然后，我点击图片缩略图时会显示以下代码：

  $（'。thumbnail'）click（function（）{
 var link = $（this）.attr（'src'） ; 
 $（'。large_view'）。prepend（'< img src ='+ link +'width =450px/>'）; 
}）; 
  

这一切都很好，但我想让代码工作，这样当我点击按钮 .next 和 .previous ，下一个/上一个图像的URL（在数组中）将替换 .large_view

我假设我需要在阵列中找到点击的图像中的哪个数字，然后增加或减少

解决方案

查看下面的输出，您可以使用此代码

• 首先设置index = 0并创建默认图片


• 如果不是3，则将下一个检查增加1。


• 如果3，则设置为零


• 上一页

  var link = [http://img4.wikia.nocookie.net/__cb20111201004451/internetphoto /images/8/81/Google_Image_Result_for_http-wallpaperstock.net-small-cute-kitty_wallpapers_24216_1920x1200.jpg，https://lh6.ggpht.com/RIt3-kTajLWZIxunxQz9uEQp7cQ6htqFYZTcwbJXwsyKKp35BCLxKnvzswAiDfS5zQ=h310，https：//encrypted-tbn1.gstatic .com / images？q = tbn：ANd9GcQ1NIp3cJPgEDVBQJ_jwXO27Xa-9fJqdQXuYEYa2S3NgiM8OZSf，https://lh5.ggpht.com/T2acx2jKADSe1iwM6GbinPlY_1DGqF4qQAI37-ua6hwQ-DrVYDXmqRPz2HuzwrmFyQ=h310]; index = 0; $（'。large_view'）。prepend（'< img src ='+ link [index] +'width =450px/>'）; $（'。next'）。click（function（）{index =（index == link.length-1）？0：（index + 1）; $（'large_view img'）。attr（'src'， link [index]）;}）; $（'。previous'）。click（function（）{index =（index == 0）？（link.length-1）:( index-1）; $（'large_view img'）。attr '，link [index]）;}）;  

  div .large_view img {width：400px; height：100px;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>< div class =large_view> < / div>< / div>< button class =previous>上一页< / button>< button class =next>下一页< / button>   

So I have a jQuery array with image URLs in it:

var images = ["link1","link2","etc","etc"];

I then have this code for when the thumbnail of an image is clicked:

$('.thumbnail').click(function(){
  var link = $(this).attr('src');
  $('.large_view').prepend('<img src="'+link+'" width="450px"/>');
});

This all works fine, but I want the code to work so that when I click buttons .next and .previous, the next/previous image's URL (in the array) will replace the one currently prepended in .large_view

I assume that somehow I need to find which number in the array the clicked image is, then increase or decrease the number to that of the new image.

How should this be accomplished?

解决方案

See output below, you can use this code

• First set index=0 and make an default image
• on next check if not 3, increase 1 to index
• if 3 then set back to zero
• reverse this logic for previous

   var link = ["http://img4.wikia.nocookie.net/__cb20111201004451/internetphoto/images/8/81/Google_Image_Result_for_http-wallpaperstock.net-small-cute-kitty_wallpapers_24216_1920x1200.jpg",
            "https://lh6.ggpht.com/RIt3-kTajLWZIxunxQz9uEQp7cQ6htqFYZTcwbJXwsyKKp35BCLxKnvzswAiDfS5zQ=h310",
            "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ1NIp3cJPgEDVBQJ_jwXO27Xa-9fJqdQXuYEYa2S3NgiM8OZSf",
              "https://lh5.ggpht.com/T2acx2jKADSe1iwM6GbinPlY_1DGqF4qQAI37-ua6hwQ-DrVYDXmqRPz2HuzwrmFyQ=h310"];
 index=0;


          
 $('.large_view').prepend('<img src="'+link[index]+'" width="450px"/>');

           $('.next').click(function(){
           index = (index==link.length-1)?0:(index+1);
            
           $('.large_view img').attr('src',link[index]);
           });
    
         $('.previous').click(function(){
         index = (index==0)?(link.length-1):(index-1);
          $('.large_view img').attr('src',link[index]);
         });

div.large_view img{
width:400px;
height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="large_view">
 
  </div>

<button class="previous">previous</button>
<button class="next">next</button>

这篇关于下一个和上一个在jQuery数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！