javascript - 隐藏 slider 中具有相同 id 的空图像

Question

如何在 slider 内隐藏一两个空输入图像？我尝试使用此代码，我认为它有效，因为当另外两个图像为空时只显示一个图像，但是当我插入第二个或三个图像时始终仅显示第一个图像，我的错误在哪里？你能帮我吗..

代码如下:

库 js:

<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.nerveSlider.min.js"></script>
<script>
    $(document).ready(function() {
    $(".myslider").show();
    $(".myslider").startslider({
        slideTransitionSpeed: 900,
        slideImageScaleMode: "fit",
        sliderKeepAspectRatio: true,
        slideTransitionEasing: "easeOutExpo",
        slidesDraggable: true,
        sliderResizable: true,
        showDots:true,
        });
    });
</script>

<?php 
    try {
        $query = "SELECT id, foto1, foto2, foto3 FROM FOTOS WHERE id = ?";
        $stmt = $conn->prepare( $query );
        $stmt->bindParam(1, $_REQUEST['id']);    
        $stmt->execute();
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        $id = $row['id'];
    }
    catch(PDOException $exception)
    { 
        echo "Error: " . $exception->getMessage();
    }
?>

<div class="myslider" id="<?php echo $id; ?>">
    <?php 
        if (!empty($row['foto1'])) 
        { 
            echo '<img src="assets/img/'.$row["foto1"].'" alt="imagen 1" style="max-width:600px; max-height:400px;" />';
        }
        else if (!empty($row['foto2'])) 
        { 
            echo '<img src="assets/img/'.$row["foto2"].'" alt="imagen 2" style="max-width:600px; max-height:400px;" />';
        }
        else if (!empty($row['foto3'])) 
        { 
            echo '<img src="assets/img/'.$row["foto3"].'" alt="imagen 3" style="max-width:600px; max-height:400px;" />';
        }
    ?> 
</div>

Answer 1

问题出在您的 PHP 代码中；

if-else if-else if 组只会处理，直到第一个 if 或 else if 检查返回 true；然后它将处理该语句并跳过其余的 else if 语句。因此，要修复它，只需将 else if 替换为 if - 如下所示:

...snip...
<div class="myslider" id="<?php echo $id; ?>">
    <?php 
        if (!empty($row['foto1'])) 
        { 
            echo '<img src="assets/img/'.$row["foto1"].'" alt="imagen 1" style="max-width:600px; max-height:400px;" />';
        }
        if (!empty($row['foto2'])) 
        { 
            echo '<img src="assets/img/'.$row["foto2"].'" alt="imagen 2" style="max-width:600px; max-height:400px;" />';
        }
        if (!empty($row['foto3'])) 
        { 
            echo '<img src="assets/img/'.$row["foto3"].'" alt="imagen 3" style="max-width:600px; max-height:400px;" />';
        }
    ?> 
</div>