在滑块中隐藏具有相同 ID 的空图像答案

【问题标题】：hide empty images with same id in slider在滑块中隐藏具有相同 ID 的空图像
【发布时间】：2014-03-02 02:25:09
【问题描述】：

如何在滑块内隐藏一两个空输入图像？我尝试了这段代码，我认为它可以工作，因为当另外两个为空时只显示一个图像，但是当我插入第二个或三个图像总是只显示第一个时，我的错误在哪里？你能帮帮我吗..

代码如下：

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

【问题讨论】：

你想用 jquery 还是 php 来做这个？
您在询问 jQuery，但您已经发布了 PHP。选一个。 :-) 如果你想要的是 jQuery，请向我们展示 HTML。

标签： javascript php mysql show-hide

【解决方案1】：

问题出在您的 PHP 代码中；

if-else if-else if 组将只处理直到第一个返回 true 的 if 或 else if 检查；然后它将处理该语句并跳过其余的else if 语句。因此，要修复它，只需将您的 else ifs 替换为 ifs - 就像这样：

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

【讨论】：

【解决方案2】：

<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 {
        echo '';
    }

    if (!empty($row['foto2'])) { 
        echo '<img src="assets/img/'.$row["foto2"].'" alt="imagen 2" style="max-width:600px; max-height:400px;" />';
    } else {
        echo '';
    }

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

【讨论】：