Question

我正在为客户创建一个网站，但我主要是一个前端开发人员。我必须创建一个while循环（它工作正常）来构建一个库。客户想要在图库上显示前/后。我选择使用TwentyTwo 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>

Answer 1

在没有订购声明的情况下尝试。

示例：

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

如果您可以分享数据库的填写方式，那么可以更轻松地帮助您。

项目链接。

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

Answer 2

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

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

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

我将您的ready处理程序更新为推荐结构。或者简写：

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

使用类选择器时，可以删除HTML元素中的ID 如果你想坚持使用ID，可以在循环中添加一个迭代变量并使用attribute选择器：

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

使用带有PHP while循环的jQuery函数

2 个答案: