PHP whileループでjQuery関数を使用する

Question

私はクライアント用のウェブサイトを作成していますが、主にフロントエンド開発者です。私はギャラリーを作るためにwhileループを作成しなければなりませんでした。クライアントはギャラリーに前後の表示を望みます。私はTwentyTwo jQueryプラグインを使用することに決めました。しかし、私は問題があります。最初のコンテナが表示されているだけで、うまく表示されます。

必要なjQuery、インライン、およびCSSファイルが、上のリンク先のページに表示されます。私はフレームワークとしてブートストラップを使用しています。ここに私のコードは次のとおりです。

$(window).load(function() { 
 
    $("#container1").twentytwenty(); 
 
});

<div class="row"> 
 
    <div class="col-lg-12"> 
 
    <h2><span class="color">Our Gallery</span> </h2> 
 
    <?php 
 
      //Selects all images 
 
      $sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery ORDER BY postDate DESC") or die($GLOBALS['gmysqli']->error); 
 
    
 
      while ($row = $sql->fetch_assoc()) { 
 
       $image = $row["image"]; 
 
       ?> 
 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
 
     <div id="container1" class="twentytwenty-container"> 
 
      <img src="<?php echo $beforeimage; ?>"> 
 
      <img src="<?php echo $afterimage; ?>"> 
 
     </div> 
 
     </div> 
 
     <?php } ?> 
 
    </div> 
 
</div>

Answer 1

ここでの問題は、PHPループで生成した重複IDです。この結果、htmlが無効になり、セレクタとして使用すると問題が発生する可能性があります。

あなたはクラスセレクタの使用に切り替えることができます。

$(document).ready(function(){ 
    $(".twentytwenty-container").twentytwenty(); 
}); 

私はお勧め構造へのごreadyハンドラを更新しました。または速記用：

$(function() { 
    $(".twentytwenty-container").twentytwenty(); 
}); 

あなたがあなたのループに反復変数を追加することができますIDに固執し、attributeを使用する場合は、HTML要素 にIDを取り除くことができますクラスセレクタを使用セレクター：あなたがループ内で固定されたIDを使用している

$(function() { 
 
    $("div[id^='container-']").twentytwenty(); 
 
});

<?php 
 
$i = 0; 
 
while($row = $sql->fetch_assoc()) { 
 
    $image = $row["image"]; ?> 
 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
 
    <div id="container-<?php echo $i; ?>" class="twentytwenty-container"> 
 
     <img src="<?php echo $beforeimage; ?>"> 
 
     <img src="<?php echo $afterimage; ?>"> 
 
    </div> 
 
    </div> 
 
<?php 
 
    $i++; 
 
} ?>

Answer 2

は声明によるためずにしてみてください。

例：

<div class="row"> 
       <div class="col-lg-12"> 
        <h2><span class="color">Our Gallery</span> </h2> 
        <?php 
          //Selects all images 
          $sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery") or die($GLOBALS['gmysqli']->error); 

          while($row = $sql->fetch_assoc()) 
          { $image = $row["image"]; ?>       
           <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
           <div id="container1" class="twentytwenty-container"> 
           <img src="<?php echo $beforeimage; ?>"> 
           <img src="<?php echo $afterimage; ?>"> 
           </div> 
           </div> 
          <?php } ?> 
          </div> 
         </div> 

あなたは、データベースがあなたを助けるために、より簡単にでき記入されている方法を共有することができれば。

プロジェクトリンク。

とにかくあなたを助けてくれることを願っています。