javascript - If element has two specific classes, disable button -
i have group of divs user can scroll though clicking on next , previous button. @ 1 time there should ten divs loaded. when user clicks next button, first div hidden , next div shown. goes previous button. when user viewing first div, previous button disabled , when user viewing last div, next button disabled. far, have working except disabling of buttons.
here loose structure of 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>
here jquery script far:
$(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(); }); });
it seems easiest way disable buttons this:
if (.logo-image).hasclass(current) && (.logo-image).hasclass(first) (logo-previous).attr(disabled true)
for reason, method doesn't work me. there better way go disabling buttons?
first of all, can narrow down code
$(".logo-previous").attr("disabled", $(".logo-image").is(".first.current"));
or can use sibling selector:
$(".logo-image.first.current ~ .logo-previous").attr("disabled", true);
second, use css3 attribute pointer-events setting none
.
Comments
Post a Comment