Javascript 单击5次后显示div

我在一个容器上有2个div。我想从5中获得id=“下划线”的div的第一个图像4次。我有5个更改的图像，对于前4个，我只想获得第一个div的图像。在最后一个图像上，我必须隐藏第一个div图像并显示第二个div图像

我试过：

$(document).ready( function() { 
    $('#underscore').show();
    $('#underscore_umbrela').hide();

    if(imgNumber < 4){
        $('#underscore').hide();
    $('#underscore_umbrela').show();
    }
        } 

<div id="underscore" class="underscore">
       <div><img id="underscore" src="images/underscore.png" alt=""/></div>
       <div><img id="underscore_umbrela" src="images/underscore_umbrela.png" alt=""/></div>
       </div>

$（文档）.ready（函数（）{
$（“#下划线”）.show（）；
$（“#下划线_umbrela”）.hide（）；
如果（imgNumber<4）{
$（“#下划线”）.hide（）；
$（'#下划线_umbrela'）.show（）；
}
} 

您不能在两个或多个元素之间共享相同的ID，因此我已更新了您的标记

<div id="wrapper" class="underscore">
    <div><img src="http://placekitten.com/200/200" id="underscore" /></div>
    <div><img src="http://placekitten.com/400/400" id="underscore_umbrella" /></div>
</div>

---

这里有一个

你的“imgNumber”是在哪里宣布的？你希望在哪种情况下实现这一要求？为什么要投反对票？这是一个合理的问题。我对其中的所有代码都做了手脚：我们开始：）这根本没有帮助。我已经回答了你提出的问题。你的代码看起来很棒，我已经实现了一些东西，这里有一个小问题：…我的代码上的问题是页面以下划线开头，而不是下划线…在1下一个OK之后，它从underscore img开始，然后在接下来的4次单击后，它显示underscore\u umbrela img，这很好…但是如果我将其设置为hide，为什么它从underscore\u umbrela开始：（我想…它从第一次单击开始工作（我的意思是隐藏下划线和显示下划线，因为它在一个通过单击调用的函数中……）因此，我用$（“#下划线_umbrela”）.hide（）创建了另一个函数，当文档加载时调用：）现在当文档加载显示下划线直到第5个图像变为下划线(u umbrela:xcan i@monners创建了一个函数或其他东西来在答案错误时清除我的拖放内容？我做了一个提交功能，它通过警报告诉我是错还是对…在这两种情况下，删除的区域都有内容，但我只想在答案正确时保留它…你可以检查小提琴，看看我的意思我再次弄明白：D

$(function() {
    var counter = 0,
        $img1 = $('#underscore'),
        $img2 = $('#underscore_umbrella');

    $img1.show(); // Set img1 as visible (if it isn't already)
    $img2.hide(); // Set img2 as hidden

    $('#wrapper').on('click', function() {
        if (counter === 4) {
            $img1.hide();
            $img2.show();
            counter = 0;
        } else {
            $img1.show();
            $img2.hide();
            counter += 1;
        }
    });
});