在PHP while循环中使用jQuery函数

我正在为客户端创建网站，但我主要是前端开发人员。我不得不建立一个while循环（这工作得很好）来建立一个画廊。客户希望在画廊上显示前/后。我选择使用TwentyTwo jQuery插件。但是，我有一个问题。它只显示第一个容器，显示得很好。在PHP while循环中使用jQuery函数

必要的jQuery，inline和css文件显示在上面链接的页面上。我使用bootstrap作为框架。这里是我的代码：

$(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>

来源

2017-03-07 Cody

，这将导致你的文档中重复的ID。这是无效的。除此之外：你如何调用jQuery函数？现在，问题与jQuery本身无关，只与PHP和Mysql有关。 '$ row'是否包含您期望它执行的所有图像？ – empiric

是的，它会显示所有图像，如果我没有这个jQuery功能的结构。我使用该页面上包含的脚本调用jQuery函数。它是有没有什么方法可以让容器ID每次都有所不同？在他们包含的示例页面中，他们使用与该图像相同的每个div的ID。 – Cody

这里的问题是您在php循环中生成的重复ID。这会导致无效的HTML，并将其用作选择器时可能会导致问题。

您可以切换到使用类选择：

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

我更新了ready处理程序的建议结构。或简写：

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

当如果你想坚持的ID，你可以一个迭代变量添加到您的循环和使用attribute使用类选择，你可以在HTML元素摆脱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++; 
 
} ?>

您使用的是循环中的固定ID

来源

2017-03-07 18:58:44 empiric

尝试没有为了通过声明。

例子：

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

如果你可以分享你的数据库是如何填写能够更容易帮助你。

和项目链接。

无论如何，我希望能帮到你。

来源

2017-03-07 18:39:51

在PHP while循环中使用jQuery函数

回答

相关问题