Question

我在容器上有2个div。我想从div获得第一个图像，ID =“下划线”4次从5开始。我有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>

Answer 1

Ya不能在两个或多个元素之间共享相同的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>

这是实现第五次点击显示的javascript：

$(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;
        }
    });
});

这是一个Fiddle

在下次点击5次后显示div

1 个答案: