0

我有一组 div，用户可以通过单击下一个和上一个按钮来滚动。任何时候都应该只加载十个 div。当用户单击下一个按钮时，第一个 div 被隐藏并显示下一个 div。用于上一个按钮。当用户查看第一个 div 时，我希望禁用上一个按钮，而当用户查看最后一个 div 时，我希望禁用下一个按钮。到目前为止，除了禁用按钮之外，我一切正常。

这是我的 HTML 的松散结构

<div>
    <button id="logo-previous"></button>
    <div class="logo-image"></div>
    <div class="logo-image"></div>
    <div class="logo-image"></div>
    <button id="logo-next"></button>
</div>

到目前为止，这是我的 jQuery 脚本：

$(document).ready(function() {
    $('.logo-image:lt(10)').show();
    $('.logo-image').first().attr('id', 'first');
    $('.logo-image').last().attr('id', 'last');
    $('.logo-image:lt(10)').addClass("current");

    $('#logo-next').click(function() {
        $('.current').first().removeClass("current").hide();
        $('.current').last().next().addClass("current").show();
    });

    $('#logo-previous').click(function() {
        $('.current').last().removeClass("current").hide();
        $('.current').first().prev().addClass("current").show();
    });
});

似乎禁用按钮的最简单方法是执行以下操作：

if (.logo-image).hasClass(current) && (.logo-image).hasClass(first) 
    (logo-previous).attr(disabled true)

出于某种原因，这种方法对我不起作用。有没有更好的方法来禁用按钮？

4

2 回答 2

0

使用选择器来查找具有 ID 和类的元素。

$("#logo-previous").prop("disabled", $("#first.current").length != 0);

$("#logo-next").prop("disabled", $("#last.current").length != 0);
于 2013-08-13T19:12:31.480 回答
0

首先，您可以将代码范围缩小到

$(".logo-previous").attr("disabled", $(".logo-image").is(".first.current"));

或者您可以使用兄弟选择器：

$(".logo-image.first.current ~ .logo-previous").attr("disabled", true);

其次，您可以通过将 CSS3 属性指针事件设置为none.

于 2013-08-13T19:13:21.910 回答