使用 JQuery 切换 div 后重新加载 CSS答案

【问题标题】：Reload CSS after toggling divs with JQuery使用 JQuery 切换 div 后重新加载 CSS
【发布时间】：2017-03-24 01:13:10
【问题描述】：

Tim Robert-Fitzgerald 在Codepen 上找到了一种非常干净简单的方法，可以使用过滤器切换 div 的可见性，它在我的网站上效果很好，但是我需要根据我的需要稍微扩展它。

默认情况下，我有一个删除第二个 div 的边框的 nth-child 设置，但是当切换 div 时，这不会重新应用于第二个 div。实际上它仍然被应用，但这是不可见的，因为 div 设置为 display:none;

请在切换 div 后让第 n 个孩子重新计算？

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

* {
  box-sizing: border-box;
}
body {
  padding: 10px;
  background: #ecf0f1;
  font-family: helvetica, sans-serif;
  font-weight: 200;
}
.btn {
  border: none;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 5px;
}

.active {
  background: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.box {
  background:#2980b9;
  padding: 10px;
  height: 100px;
  width: calc(33% - 10px);
  float: left;
  margin: 5px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
  border:4px solid #000;
}

.box:nth-child(2) {
border:none;
}

.spacer {
  clear: both;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>

<div class="spacer"></div>

<div id="parent">
  <div class="box a b">A &amp; B</div>
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

【问题讨论】：

很遗憾，不能用 CSS 完成。您需要像答案中那样合并一个 JS 解决方案。

标签： javascript jquery css css-selectors

【解决方案1】：

您使用的 CSS 选择器 (:nth-child(2)) 不是您需要的，因为它基于 HTML DOM 元素。第二个元素永远不会改变 DOM 中的位置，它只是被隐藏了。

我不相信有 CSS 解决方案，但有一个 jQuery 解决方案。

我拿了你的 Codepen 并修改了很少的东西

CSS（而不是.box:nth-child(2)）

.box.no-border {
    border:none;
}

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');

  $('.box').removeClass('no-border'); // reinitialize
  $('.box:visible').eq(1).addClass('no-border'); // apply the class
})

请注意，eq() 方法是基于 0 的索引，因此.eq(1) 将为您提供第二个元素。添加 :visible 只会让您获得那些在屏幕上可见的内容。

【讨论】：

"CSS 选择器无效" 不，它是有效的。它只是不匹配正确的元素。这和无效不是一回事。
太棒了，非常感谢。作为奖励，我希望（例如）一类“nofilter”的所有东西都不要管。上面的可以实现吗？
@Ordog 是的，你需要使用 .not()。例如 $('.box').not( ".nofilter" ).doWhatever();

【解决方案2】：

这不起作用，因为元素仍然存在，只是被隐藏了。您可能需要考虑使用一个额外的类来控制边框（或您想要的任何其他样式）并用您的 jQuery 交换它们，就像添加和删除活动类一样。

【讨论】：