删除课程不工作

Question

为什么removeClass函数在这种情况下不起作用？希望按钮在未激活时变回灰色背景。添加类似乎工作得非常好。

＆＃13;

＆＃13;

  $(".tiles").click(function() {
    var divname = this.value;

    $(this).addClass("active")

    $("#material" + divname).fadeIn('3000').siblings('.material').hide();

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

＆＃13;

.material {
  display: none;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

您需要找到父<button id="btn'">Click me</button> ，找到它的兄弟姐妹，然后找到他们的子按钮：

＆＃13;

＆＃13;

div

＆＃13;

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

＆＃13;

.material {
  display: none;
}

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

＆＃13;

＆＃13;

＆＃13;