将样式更改为切换的 div

Question

我正在使用过滤的 div，我只想在切换特定部分时更改每个部分的 flex-direction，然后在返回“显示全部”时返回原始样式

这是过滤后的 div 的链接 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements

Answer 1

W3 Schools 代码不是很好。可以大大改进，但使用data attributes、proper event listeners和event bubbling

要让您的“灵活切换”发生，我们只需在“.container”中添加/删除一个类以指示是否被过滤

var container = document.querySelector(".container");

//Add an event listener to the div containing the buttons
document.getElementById("myBtnContainer").addEventListener("click", function(event) {

  //remove active class from previous active button
  this.querySelector(".active").classList.remove("active");
  //add active class to clicked item
  event.target.classList.add("active");

  //Add filitered to ".container" if "All" clicked, remove otherwise
  container.classList.toggle("filtered", event.target.dataset.target !== "all")
  
  //Display chosen elements
  var elements = container.querySelectorAll(".filterDiv");
  for (var i = 0; i < elements.length; i++) {
    //Long version of below
    //var categoryArray = elements[i].dataset.category.split(",");
    //var hasTargetCategory = categoryArray.includes(event.target.dataset.target);
    //elements[i].classList.toggle("show",hasTargetCategory);

    elements[i].classList.toggle("show", elements[i].dataset.category.split(",").includes(event.target.dataset.target));
  }
})

.filterDiv {
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  flex: none;
}

.container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}


/*Class to change flex direction*/
.filtered {
  flex-direction: column;
}


/*Hide elements without the show class*/
.filtered>.filterDiv:not(.show) {
  display: none;
}

<div id="myBtnContainer">
  <button class="btn active" data-target="all"> Show all</button>
  <button class="btn" data-target="cars"> Cars</button>
  <button class="btn" data-target="animals"> Animals</button>
  <button class="btn" data-target="fruits"> Fruits</button>
  <button class="btn" data-target="colors"> Colors</button>
</div>

<div class="container">
  <div class="filterDiv" data-category="cars">BMW</div>
  <div class="filterDiv" data-category="colors,fruits">Orange</div>
  <div class="filterDiv" data-category="cars">Volvo</div>
  <div class="filterDiv" data-category="colors">Red</div>
  <div class="filterDiv" data-category="cars,animals">Mustang</div>
  <div class="filterDiv" data-category="colors">Blue</div>
  <div class="filterDiv" data-category="animals">Cat</div>
  <div class="filterDiv" data-category="animals">Dog</div>
  <div class="filterDiv" data-category="fruits">Melon</div>
  <div class="filterDiv" data-category="fruits,animals">Kiwi</div>
  <div class="filterDiv" data-category="fruits">Banana</div>
  <div class="filterDiv" data-category="fruits">Lemon</div>
  <div class="filterDiv" data-category="animals">Cow</div>
</div>

Answer 2

我不明白您所说的“灵活转向”是什么意思，是否将“显示全部”一词替换为活动部分？这可以使用 jquery 来完成，但您必须替换包含文本的元素。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="all">Show all</button>
<button type="button" id="cars">cars</button>
<script>
$("#cars").on("click", function(){
    $("#all").text('Cars');
});
$("#all").on("click", function(){
    $("#all").text('Show All');
});
</script>

不带 jquery 的替代方案

<button id="all">Show All</button>
<button id="cars" onclick="cars()">Cars</button>

<script>
function cars() {
    document.getElementById("all").innerHTML = "Cars";
}
</script>

在没有太多 javascript 和 css 的情况下构建选项卡的替代方法

• Bootstrap Collapse：您可以使用已经准备好结构的 Bootstrap Colapse，您只需按照文档用 div 组织 HTML：https://getbootstrap.com/docs/4.0/components/collapse/

• Javascript 行为：与上一个一样，这是一个选项卡式浏览 API，与您使用的代码相同，不同之处在于您将使用 Bootstrap 结构，而不会需要很多修改，你应该注意这个和上一个的相似之处，实际上改变的只是可用性，你会使用其中一个或另一个的情况，但目的是一样的，都是为了隐藏元素。 https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior