Question

我正在制作快速的jQuery幻灯片，我遇到了一些问题。当你按下导航按钮时，我有一个变量增加或减少，代码应该根据数字显示或隐藏图像。然而，它似乎不起作用，只显示img1而不显示任何其他图像。我已经验证了currentImage变量正在正确更改。请让我知道我做错了什么。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var currentImage = 0;
    $("#next").click(function(){
        currentImage++;
        if(currentImage > 2)
        {
            currentImage = 0;
        }
    });
    $("#previous").click(function(){
        currentImage--;
        if(currentImage < 0)
        {
            currentImage = 2;
        }
    });
    if(currentImage == 0)
    {
        $(".img1").show();
    }
    else
    {
        $(".img1").hide();
    }
    if(currentImage == 1)
    {
        $(".img2").show();
    }
    else
    {
        $(".img2").hide();
    }
    if(currentImage == 2)
    {
        $(".img3").show();
    }
    else
    {
        $(".img3").hide();
    }
});
</script>

Answer 1

您只运行一次If / Then / Else语句，在文档加载时，您需要在点击事件后重新运行它们：

postRegisterUserR

Answer 2

单击按钮时，应执行显示或隐藏图像的代码。目前它只是隐藏或显示文档准备好的按钮。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var currentImage = 0;
        $("#next").click(function(){
            currentImage++;
            if(currentImage > 2)
            {
                currentImage = 0;
            }
            ShowOrHideImage();
        });
        $("#previous").click(function(){
            currentImage--;
            if(currentImage < 0)
            {
                currentImage = 2;
            }
            ShowOrHideImage();
        });

    function ShowOrHideImage() {
        if(currentImage == 0)
        {
            $(".img1").show();
        }
        else
        {
            $(".img1").hide();
        }
        if(currentImage == 1)
        {
            $(".img2").show();
        }
        else
        {
            $(".img2").hide();
        }
        if(currentImage == 2)
        {
            $(".img3").show();
        }
        else
        {
            $(".img3").hide();
        }
    }   
    });
</script>

Answer 3

您的条件语句在文档准备就绪后立即运行，此时currentImage的值为0.您可以将其添加到函数中并在每次点击时调用它

var toggleImages = function(current) {

  if(current== 0)
    {
        $(".img1").show();
    }
    else
    {
        $(".img1").hide();
    }
    if(current== 1)
    {
        $(".img2").show();
    }
    else
    {
        $(".img2").hide();
    }
    if(current== 2)
    {
        $(".img3").show();
    }
    else
    {
        $(".img3").hide();
    }
};


$(document).ready(function(){
    var currentImage = 0;
    $("#next").click(function(){
        currentImage++;
        if(currentImage > 2)
        {
            currentImage = 0;
        }
        toggleImages(currentImage);
    });
    $("#previous").click(function(){
        currentImage--;
        if(currentImage < 0)
        {
            currentImage = 2;
        }
        toggleImages(currentImage);
    });

});

Answer 4

你的代码应该是：

$(document).ready(function(){
     currentImage = 0;
      updateImgae(currentImage);
    $("#next").click(function(){
        currentImage++;
        if(currentImage > 2)
        {
            currentImage = 0;
        }
         updateImgae(currentImage);
    });
    $("#previous").click(function(){
        currentImage--;
        if(currentImage < 0)
        {
            currentImage = 2;
        }
         updateImgae(currentImage);
    });
    function updateImgae(currentImage){
    if(currentImage == 0)
    {
        $(".img1").show();
    }
    else
    {
        $(".img1").hide();
    }
    if(currentImage == 1)
    {
        $(".img2").show();
    }
    else
    {
        $(".img2").hide();
    }
    if(currentImage == 2)
    {
        $(".img3").show();
    }
    else
    {
        $(".img3").hide();
    }
    }
});

Answer 5

一个更简单的版本 - 获取图像的来源，递增或递减图像并用新的源替换图像。需要将图像命名为1.jpg，2.jpg和3.jpg等（并放置在正确的文件夹中 - 我使用过图像/幻灯片/ 1.jpg等）。

<!DOCTYPE html>                       
<html lang="en">
  <head>
    <meta charset="utf-8">
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <button type="button" value = "-1">Previous Image</button>
        <img id="slideshowImage" src="images/slideshow/1.jpg" alt="Image 1" height="100" width="100"/>
        <button type="button" value = "+1">Next Image</button>

<script>
    $(":button").click(function() {
        var imageSrc=$('#slideshowImage').attr('src').split('/');
            var count = parseFloat(imageSrc[2]);
            var newSrc = count+parseFloat(($(this).val()))
                if(newSrc>3){newSrc=1}else{if(newSrc==0){newSrc=3}};
        $('#slideshowImage').attr('src','images/slideshow/'+newSrc+'.jpg').attr('alt','Image '+newSrc)
            });
</script>
</body>
</html>

基本上在单击任一按钮时，会调用一个函数来确定图像源，将其拆分以获取特定的图像编号，根据按下的按钮递增或递减该编号，并设置新的图像srouce和alt属性对新计数。除了少量代码之外，这种方法的好处是，它很容易扩展，并在将来添加更多图片到幻灯片中。希望这有帮助，gavgrif

jQuery隐藏/显示If / Else语句不起作用

5 个答案: