Question

我在下面有这个照片切换器，我只想使用jQuery修改HTML内容。如果您点击＆＃34;显示下一张照片＆＃34;链接jQuery将取代＆＃34; fruits.png＆＃34;与另一个图像示例＆＃34; airplane.png＆＃34;。（注意：不允许更改HTML块）。

我不确定它对jQuery有多复杂。如果我可以避免JavaScript，那将是完美的。

<!--Do Not Change Inside this DIV-->
    <div id="imageSwitcher">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" id="fruits" />
        <img src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png" id="tulips" style="display:none;" />
        <p><a href="#">Show Next Photo</a></p>
    </div>

问题： 这是我的下面的脚本，并没有正常工作，因为当我刷新页面时，它只显示了airplane.png，如果我点击链接＆＃34;显示下一张照片＆＃34;它让飞机消失了。

请尝试https://codepen.io/mrborges/pen/QQjJOq

<script>
        //Go away fruits.png
        document.getElementById('fruits').style.cssText = "display:none;";

        $(document).ready(function () {
            $('p').click(function () {
                $('#imageSwitcher img').attr("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
                //$('#fruits').toggle("hide");
                $('#tulips').toggle("slow");


            })
        });
    </script>

Answer 1

<script>
    $(document).ready(function () {
        let count = localStorage.getItem('count') || 0; // "0, 1, 2" or 0
        count = parseInt(count, 10); //If we get it from storage then convert to number
        const images = [
            "https://homepages.cae.wisc.edu/~ece533/images/fruits.png",
            "https://homepages.cae.wisc.edu/~ece533/images/tulips.png",
            "https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
        ];
        $('#fruits').attr("src", images[count]);

        $('p').click(function () {
            count = (count + 1) % images.length;
            $('#fruits').attr("src", images[count]);
            localStorage.setItem('count', count);
        });
    });
</script>

const images是指向之间切换的链接的列表（数组）。我添加了所有可能的图像，然后我只更改每个图像的src。一个纯粹的jQuery解决方案会非常难看，所以你必须接受一些普通的JavaScript。

如果我们到达图片末尾，则每次点击count = (count + 1) % images.length时，此行<p>计为1，然后它会重置为0。例如(2 + 1) % 3 = 0

定位HTML ID并使用jQuery修改内容

1 个答案: