jquery - Remove class not working -
why removeclass function not working in case? button turn grey-background once not active. add class seems work fine.
$(".tiles").click(function() { var divname = this.value; $(this).addclass("active") $("#material" + divname).fadein('3000').siblings('.material').hide(); $(this).siblings('.tiles').removeclass("active") });
.material { display: none; } .active { background: red; color: #13223d; border: 1px solid #13223d; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='type' id='type3'> <h3>1.2.valj material</h3> <div class='tile_btn'><span id='marmorskivorcount'>0</span> <button class='tiles' type='button' name='material' value='1'>marmorskivor</button> </div> <div class='tile_btn'><span id='granitcount'>0</span> <button class='tiles' type='button' name='material' value='2'>granit</button> </div> </div> <div class='type' id='type4'> <h3>1.2.valj material</h3> <div class='tile_btn'><span id='marmorcount'>0</span> <button class='tiles' type='button' name='material' value='3'>marmor</button> </div> <div class='tile_btn'><span id='granitcount'>0</span> <button class='tiles' type='button' name='material' value='4'>granit</button> </div> </div> <div class='material' id='material1'> <a class='product'> <div class='tiles_bg' style='background:url(media/images/tile2.jpg);'> <input class='select_all' type='checkbox' name='marmorskivor' value='verde guatemala'> </div> <p>verde guatemala</p> </a> <a class='product'> <div class='tiles_bg' style='background:url(media/images/tile1.jpg);'> <input class='select_all' type='checkbox' name='marmorskivor' value='bianco carrara'> </div> <p>bianco carrara</p> </a> </div> <div class='material' id='material2'> <a class='product'> <div class='tiles_bg' style='background:url(media/images/tile4.jpg);'> <input class='select_all' type='checkbox' name='granit' value='nero assolutio'> </div> <p>nero assolutio</p> </a> </div> <div class='material' id='material3'> <a class='product'> <div class='tiles_bg' style='background:url(media/images/biancocarrara.jpg);'> <input class='select_all' type='checkbox' name='marmor' value='bianco carrara'> </div> <p>bianco carrara</p> </a> </div> <div class='material' id='material4'> <a class='product'> <div class='tiles_bg' style='background:url(media/images/imperialred.jpg);'> <input class='select_all' type='checkbox' name='granit' value='imperial red'> </div> <p>imperial red</p> </a> </div>
it doesn't work because siblings of this
buttons not .tiles
. simples solution cache tiles collection , use instead of traversal:
var $tiles = $(".tiles").click(function() { var divname = this.value; $(this).addclass("active") $("#material" + divname).fadein('3000').siblings('.material').hide(); $tiles.not(this).removeclass("active") });
Comments
Post a Comment