删除班级不起作用

ChriChri 发表于 Dev

基督教

为什么在这种情况下removeClass函数不起作用？希望该按钮在不活动时变回灰色背景。add类似乎工作得很好。

  $(".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>

小提琴

dfsq

它不起作用，因为this按钮的兄弟姐妹没有.tiles。简单的解决方案是缓存图块集合并使用它而不是遍历：

var $tiles = $(".tiles").click(function() {
    var divname = this.value;
    $(this).addClass("active")
    $("#material" + divname).fadeIn('3000').siblings('.material').hide();
    $tiles.not(this).removeClass("active")
});

演示： https : //jsfiddle.net/32xwox44/1

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。