javascript - 使用 Next 按钮遍历数组

Question

我有一个带有包含 img 的 div 的 php 文件，并且 img 来 self 的数据库，该数据库处于 arrary 状态。我想编写一个“Next”btn，因此它循环遍历数组并显示不同的 img。但我不知道如何使用 J.Query 和 php 来做到这一点。请提供一些帮助。谢谢

<link href="../css-home/findgoods.css" rel="stylesheet"/>
<script src="../js/home-img.js" type="text/javascript"></script> 

 <?php if(is_array($goodsinfo)):?>

  <div class="container">         
    <div style="display: inline-block;">
       <img class="img-click" src="<?php echo $goodsinfo[$size] - >goods_pic?>"/>
    </div>


  <button id="call_back_btn">Next</button>
    <textarea id="input"></textarea>

    <textarea id="response"></textarea><!--

what I want to do in here, is to change the value $size in my php so that I can loop through my $goodsinfo which is an array; at the start I want to show the first picture in my arrary, so i want $size to be 0 and if press Next button, $size becomes 1 and so on. I tried in two text box, it does change when I click Next, but the $size which got back from the ajax seems not changing.

$( document ).ready(function(){
$index = 0,
$itemAmt = 6,
  $.post("../js/calculate_array.php", 
    {
        size : $index,
    },
        function(data)
        {
            $('#response').val(data);
            console.log(data);
        }
    );

$('#call_back_btn').click(function()
{
     $index += 1;
      if ($index > itemAmt - 1) {
        $index = 0;
      }
     $.post("../js/calculate_array.php", 
    {

        size : $index,
    },
        function(data)
        {
            $('#response').val(data);
            console.log(data);
        }
    );
    });
});

my ajax file.

<?php
  $size = $_POST['size'];
  echo $size;
?>

Answer 1

您可以简单地使用 php 将所有图像打印到 html

// Array of images names
$images = array('img1.jpg', 'img2.jpg', 'img3.jpg');

// Lets go through array and print every image
for($i = 0; $i < count($images); $i++) {
  // If not first image, set display to "none"
  $display = $i === 0 ? '' : 'style="display:none"';
  echo('<img class="multiple-images" src="'.$images[$i].'" '.$display.'>');
}

所以只有第一张图片是可见的，其余的将被隐藏。接下来创建将显示下一张图像的 javascript 函数。

// Find all images we want to cycle through
var images = $(".multiple-images");
var next = function() {
  // Find current displayed image with class ".active"
  var current = images.filter(".active");
  // If none image was found, use the first one
  if(current.length == 0) current = images.eq(0);

  // Find next image (element) after the current one
  var next = current.next();
  // If none was found, it means we are currently displaying last image
  // and there isn't any next image, so use the first one
  if(next.length == 0) next = images.eq(0);

  // Remove ".active" class from images
  // Here, we could also remove class only from "current"
  // but just to make sure there isn't multiple images with current
  // class, use this
  images.removeClass("active");

  // Hide currently displayed image
  current.hide();

  // Show next image
  next.addClass("active").show();
}

现在只需将 next javascript 函数分配给您的按钮

$(".my-button").click(next);

改进脚本的一些技巧:

• 您可以更新 php 脚本，这样您就可以将 active 类分配给第一张图像，而不是将带有 display none 的 style 属性分配给图像
• 然后您可以更新您的 css，以便隐藏所有图像，除了带有 .active 类的图像
• 如果您想要图像之间的过渡效果，您可以将一些参数传递给hide 和show 函数