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>

fiddle

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") }); 

demo: https://jsfiddle.net/32xwox44/1


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -