Question

我有一组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)

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

Answer 1

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

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

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

Answer 2

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

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

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

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

其次，您可以将CSS3属性pointer-events设置为none来使用它。

如果element有两个特定的类，则禁用按钮

2 个答案: