次のボタンを使ってループを突き抜けます。

Question

私は、imgを含むdivを持つphpファイルを持っています。imgは私のデータベースから来ています。私は "次へ" btnをコードしたいので、配列をループして異なるimgを表示します。しかし、私はJQueryとPHPを使ってこれを行う方法を知らない。 Plzはいくつかの助けを与える。私はここで何をしたいのかTHX

<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><!-- 

は、私は配列である私の$ goodsinfoループスルーできるように、私のPHPで値$サイズを変更することです。開始時に私は自分の無法の最初の画像を表示したいので、$ sizeを0にして、Nextボタンを押すと$ sizeが1になります。 2つのテキストボックスで試しましたが、次へをクリックすると変更されますが、AJAXから返された$サイズは変更されていないようです。

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

私のAjaxのファイル。

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

Answer 1

あなたは、単にので、最初の画像だけが表示されます、残りは非表示になります

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

PHP

を使用してHTMLにすべての画像を印刷することができます。 次の画像を表示する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); 

いくつかのヒント：

• の代わりに表示してstyle属性を割り当てるように、あなたは、PHPスクリプトを更新することができ画像には何も表示されず、最初の画像にactiveクラスを割り当てることができます
• あなたがイメージ