如果元素有两个特定的类，禁用按钮答案

【问题标题】：If element has two specific classes, disable button如果元素有两个特定的类，禁用按钮
【发布时间】：2013-08-13 19:01:56
【问题描述】：

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

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

【问题讨论】：

你知道应该是if ($('.logo-image').hasClass('current') && $('.logo-image').hasClass('first')) $('.logo-previous').attr('disabled', true)吧？
你忘记了$，例如$('.logo-image').hasClass ..
因为你的类名不是字符串？
是的，我意识到 if 语句的格式不正确。这不是我使用的实际代码，而只是我认为可能有效的示例。
@user715564 - 请注意，在条件语句的第二部分中，您检查类名。但实际上，您应该检查这是否是您设置 id=first 后的 id。

标签： javascript jquery

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：