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

时间:2014-03-02 02:25:09

标签: javascript php mysql show-hide

如何在滑块内隐藏一个或两个空输入图像? 我试过这个代码,我认为它有效,因为只显示一个图像,当另外两个是空的,但当我插入第二个或三个图像总是只显示第一个,我的错误在哪里?你能帮帮我..

这里是代码:

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

2 个答案:

答案 0 :(得分:1)

问题在于您的PHP代码;

if-else if-else if组只会在第一个ifelse if检查返回true之前处理;然后它将处理该语句并跳过其余的else if语句。所以要修复它,只需用else if替换if s - 就像这样:

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

答案 1 :(得分:0)

<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 '';
    }
?>