删除 class 不起作用

Question

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

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

Answer 1

它不起作用，因为 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

Answer 2

按钮不是兄弟姐妹，它们是表亲！

您需要上到父级 div，找到它的个兄弟姐妹，然后是它们的子按钮：

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


    $(this).parent().siblings('.tile_btn').find('.tiles').removeClass("active")
  });

.material {
  display: none;
}

.active {
  background: red;
  color: #13223d;
  border: 1px solid #13223d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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='type' id='type5'>
  <h3>1.2.Valj Material</h3>
  <div class='tile_btn'><span id='granitCount'>0</span>
    <button class='tiles' type='button' name='material' value='5'>granit</button>
  </div>
  <div class='tile_btn'><span id='kalkstenCount'>0</span>
    <button class='tiles' type='button' name='material' value='6'>kalksten</button>
  </div>
  <div class='tile_btn'><span id='marmorCount'>0</span>
    <button class='tiles' type='button' name='material' value='7'>marmor</button>
  </div>
  <div class='tile_btn'><span id='Övrigt sortimentCount'>0</span>
    <button class='tiles' type='button' name='material' value='8'>Övrigt sortiment</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='material10'>
  <a class='product'>
    <div class='tiles_bg' style='background:url(media/images/GroheEssence.jpg);'>
      <input class='select_all' type='checkbox' name='Köksblandare' value='Grohe Essence'>
    </div>
    <p>Grohe Essence</p>
  </a>
</div>
<div class='material' id='material9'>
  <a class='product'>
    <div class='tiles_bg' style='background:url(media/images/BlancoSubline700-U.jpg);'>
      <input class='select_all' type='checkbox' name='Diskhoar' value='Blanco Subline 700-U'>
    </div>
    <p>Blanco Subline 700-U</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>
<div class='material' id='material5'>
  <a class='product'>
    <div class='tiles_bg' style='background:url(media/images/tile4.jpg);'>
      <input class='select_all' type='checkbox' name='granit' value='Absolute Black'>
    </div>
    <p>Absolute Black</p>
  </a>
</div>
<div class='material' id='material6'>
  <a class='product'>
    <div class='tiles_bg' style='background:url(media/images/cloudy.jpg);'>
      <input class='select_all' type='checkbox' name='kalksten' value='Bianco Talia Sesame2'>
    </div>
    <p>Bianco Talia Sesame2</p>
  </a>
</div>
<div class='material' id='material7'>
  <a class='product'>
    <div class='tiles_bg' style='background:url(media/images/MugalaWhite.jpg);'>
      <input class='select_all' type='checkbox' name='marmor' value='Mugala White'>
    </div>
    <p>Mugala White</p>
  </a>
</div>
<div class='material' id='material8'>
  <a class='product'>
    <div class='tiles_bg' style='background:url(media/images/tile3.jpg);'>
      <input class='select_all' type='checkbox' name='Övrigt sortiment' value='Ever Green marmor'>
    </div>
    <p>Ever Green marmor</p>
  </a>
</div>

删除 class 不起作用

Remove class not working

jquery

addclass

removeclass