Если элемент имеет два определенных класса, отключите кнопку

Question

У меня есть группа разделов, которую пользователь может прокручивать, нажав на следующую и предыдущую кнопку. В любой момент времени должно быть загружено только десять 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

Прежде всего, вы можете сузить код

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

или вы можете использовать селектор родственный:

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

Во-вторых, вы можете использовать атрибут CSS3 pointer-events по установив его на none.

Answer 2

Используйте селектор, который ищет элемент с идентификатором, а также класс.

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

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