Question

我有这个div：

<div id="flaw">
    <img id='flaw1' src='images\flaw1.png'>
    <img id='flaw2' src='images\flaw2.png'>
    <img id='flaw3' src='images\flaw3.png'>
    <img id='flaw4' src='images\flaw4.png'>
    <img id='flaw5' src='images\flaw5.png'>
    <img id='flaw6' src='images\flaw6.png'>
    <img id='flaw7' src='images\flaw7.png'>
    <img id='flaw8' src='images\flaw8.png'>
    <img id='flaw9' src='images\flaw9.png'>
</div>

我正在尝试制作3个按钮。每次1个随机按钮应该是好的。其他2个坏按钮应该会显示1个图像。如果您单击错误的按钮9次，所有图像都将可见，您将失去游戏。

首先我尝试将所有图像放入数组中，但我一直都失败了......

最终我最终得到了这个;

$(document).ready(function () {

    var buttons = $("#buttons img");
    var flaw = $("#flaw img");


    window.onload = function () {

        flaw.hide();

    };

    buttons.on('click', function () {
        $("#flaw1").show();
    })
});

现在要做的就是在有人点击按钮时显示第一张图片。当有人再次点击它时，显示下一张图片。直到所有9张图像都可见。但我可以弄清楚如何在每次点击时循环播放图像。任何人都可以帮助我吗？

Answer 1

你可以做这样的事情

    var flaws = $("#flaw img");
    buttons.on('click', function () {
        flaws.each(function(){
            if ( ($(this).is(":hidden") ){
                $(this).show();
                break;
            }
        });
    })

如需进一步参考，请查看

单击按钮时显示图像

1 个答案: