javascript - jQuery 在 If/Else 语句中隐藏/显示不起作用

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 语句，在文档加载时，您需要在点击事件后重新运行它们:

<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;
        }
        refreshImg();
    });
    $("#previous").click(function(){
        currentImage--;
        if(currentImage < 0)
        {
            currentImage = 2;
        }
        refreshImg();
    });
    function refreshImg(){
        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>