요소에 두 개의 특정 클래스가있는 경우 비활성화 버튼

Question

사용자가 다음 및 이전 버튼을 클릭하여 스크롤 할 수있는 div 그룹이 있습니다. 한 번에 10 개의 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

ID와 클래스가있는 요소를 찾는 selector를 사용하십시오. 모든

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

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