Question

<script type="text/javascript">
 $(document).ready(function () {
 var divs = $('.mydivs>div');
    var now = 0; // currently shown div
    divs.hide().first().show();
    $("button[name=next]").click(function (e) {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $("button[name=prev]").click(function (e) {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // or .css('display','block');
        //console.log(divs.length, now);
    });
    });
    </script>

这是我第一次开发移动应用程序而且我在所有这些编码内容都很慢。所以我的问题是，我有上面的代码来查看我的app.it中的上一个和下一个图像。但是当我有需要显示不同类别的画廊（例如：动物类别，植物类别等），并且在每个类别中，需要显示的图像很少，并且可以使用上一个和下一个按钮来控制（例如：动物[24个图像] ]，植物[20张图片]），我遇到了一些问题。问题现在是脚本只适用于第一类（例如：动物）..但是当我想查看其他类别的图像（例如：植物）时，那里似乎与柜台有问题。在出现工厂类别的第一批图像之前，我需要在下一个按钮上单击几次。

这是我上面代码的相关HTML和CSS：

HTML：

<body>

<!-- *************HOME PAGE**************** -->

<div data-role="page" id="home" data-title="home">
    <div data-role="header">
        <h1>Menu Utama</h1>
    </div><!-- /header -->

    <div><img id="Logo" src="images/logo.png"> </div> 

    <div data-role="content" class="content-primary">
        <ul data-role="listview" data-inset="true">

    <li><a href="#animal">
            <img src="images/animal-thumbnail.png" />
            <h3>category:animal</h3>
            <p>view animals </p>
            </a></li>

    <li><a href="#plant">
            <img src="images/plant-thumbnail.png" />
            <h3>category:plant</h3>
            <p>view plants</p>
            </a></li>

        </ul>

    </div> <!--/content-->

    <div data-role="footer" data-position="fixed">
        <h4></h4>
    </div><!-- /footer -->

</div><!-- /page -->


<!-- *************CATEGORY ANIMAL PAGE**************** -->

<div data-role="page" id="animal" data-title="animal">

<div data-role="header">
.
.
.
</div><!-- /header -->

<div data-role="content">
<div class="mydivs">
    <div><img id="ContentPic" src="content-pic/animal1.png" alt="photo" /></div>
    <div><img id="ContentPic" src="content-pic/animal2.png" alt="photo" /></div>
    <div><img id="ContentPic" src="content-pic/animal3.png" alt="photo" /></div>

</div>

</div> <!--/content-->

<div data-role="footer" data-position="fixed">
        <div data-role="navbar">
      <ul>
         <li><button name="prev" alt="Previous Tab"><img class="ContentPic" src="images/prev.png" /></button></li>
         <li><button name="next" alt="Next Tab"><img class="ContentPic" src="images/next.png" /></button></li>
      </ul>
    </div> <!-- nav bar -->
        <h4></h4>
</div><!-- /footer -->

</div><!-- /page -->


<!-- *************CATEGORY PLANT PAGE**************** -->

<div data-role="page" id="plant" data-title="plant">
<div data-role="header">
.
.
.
</div><!-- /header -->
<div data-role="content">
<div class="mydivs">
    <div><img id="ContentPic" src="content-pic/plant1.png" alt="photo" /></div>
    <div><img id="ContentPic" src="content-pic/plant2.png" alt="photo" /></div>
    <div><img id="ContentPic" src="content-pic/plant3.png" alt="photo" /></div>

</div>


<div data-role="footer" data-position="fixed">
        <div data-role="navbar">
      <ul>
         <li><button name="prev" alt="Previous Tab"><img class="ContentPic" src="images/prev.png" /></button></li>
         <li><button name="next" alt="Next Tab"><img class="ContentPic" src="images/next.png" /></button></li>
      </ul>
    </div> <!-- nav bar -->
        <h4></h4>
</div><!-- /footer -->

</div><!-- /page -->

<!-- ************* END **************** -->
</body>

CSS

.mydivs {
    height:100%;
    width: 100%;
}

.mydivs>div {
    width : 100%;
}

Answer 1

尝试

$(document).ready(function () {
    $('.mydivs').children().hide().filter(':first-child').show().addClass('current');
    $("button[name=next]").click(function (e) {
        var $current = $(this).closest('[data-role="footer"]').prev().find('.current').removeClass('current').hide(), $next = $current.next();
        if(!$next.length){
            $next = $current.parent().children().first();
        }
        $next.show().addClass('current'); // show next
    });
    $("button[name=prev]").click(function (e) {
       var $current = $(this).closest('[data-role="footer"]').prev().find('.current').removeClass('current').hide(), $prev = $current.prev();
        if(!$prev.length){
            $prev = $current.parent().children().last();
        }
        $prev.show().addClass('current'); // show next
    });
});

演示：Fiddle

next和prev按钮用于不同类别的图像

1 个答案: