javascript - 切换对象的可见性或显示

Question

我有一组对象使用数据过滤器进行搜索和过滤。JavaScript 切换对象的可见性以进行搜索和过滤。

我有一些标题元素应该只在他们的主题被选中时出现。例如，如果用户选择主题 #3，则主题 #3 的结果应与主题 #3 的标题一起显示。如果我执行搜索，标题应该是“搜索结果”。

我迷路的地方:图库以所有对象和部分标题就位开始。在选择它们的部分主题之前，应该隐藏部分标题。我有所有可见元素的“过滤器”类。如果我以可见性开始它们:隐藏；他们从不露面。如果我不给他们可见性:隐藏；他们永远不会消失。当我需要独立于主过滤切换这些单独的元素时，我的功能是显示和隐藏“全部”。

这是一个 fiddle ，显示页面加载时的所有标题，以及您键入或单击“全部”时的标题。在这些情况下显示的唯一标题应该是“所有结果”。

https://jsfiddle.net/ewebster/Lxveeq65/43/

JavaScript:

    $(document).ready(function () {
        //declare a global variable
        var filterVal;
        //check if sessionStorage exists and if so, if there is a var called fillTerm
        //if not, set it to a default value (all)
        if (sessionStorage && sessionStorage.getItem("filTerm")) {
            filterVal = sessionStorage.getItem("filTerm");
        } else {
            filterVal = "all";
            sessionStorage.setItem("filTerm", filterVal);
        }

        //now let's attach some interaction to our buttons
        $(".filter-button").on("click", function () {
            //get the value for our filter
            filterVal = $(this).attr("data-filter");
            //store it in the session storage
            sessionStorage.setItem("filTerm", filterVal);
            console.log(sessionStorage);
            console.log(filterVal);
            //call our view update function
            updateView();
        });

        $("#searchBtn").on("click",function(){
            filterVal = $('#searchEntry').val();
            sessionStorage.setItem("filTerm", filterVal);
            updateView();
        });

        $("#searchEntry").on("keypress",function(e){
                if (e.keyCode == 13) {
              filterVal = $('#searchEntry').val();
              sessionStorage.setItem("filTerm", filterVal);
              updateView();
            }
        });

        //this is the function that manipulates the UI
        function updateView() {
            //default situation: all is visible
            if (!filterVal || filterVal === "all") {
                $('.filter').show();
            }
                //hide all and show filtered values
            else {
                $(".filter").hide();
                $('.filter').filter('.' + filterVal).show();

                console.log("searchTerm");
                console.log("filterVal");
            }
        };
        //update the view when the page loads
        updateView();

    });

Answer 1

display 的属性规则需要写在.hidden CSS 类中。但是，这还不够，因为特异性。 您可能需要将标题包装在另一个带有 id 的 div 中以解决这个问题。

如果你不是那么反对使用 !important，你有这样的解决方案。

sessionStorage references are removed for brevity and lack of support on here.

$(document).ready(function() {
  var filterVal = "all";

  $(".filter-button").on("click", function() {
    filterVal = $(this).attr("data-filter");
    updateView();
  });

  function updateView() {
    //default situation: all is visible
    $('.filter').addClass('hidden');
    $('.' + filterVal).removeClass('hidden');
  };

  updateView();
});

body {
  font-family: arial;
  font-size: small;
}

.item {
  height: 60px;
  width: 50px;
  padding: 10px;
  margin: 10px;
  background-color: grey;
  text-align: center;
  color: white;
  overflow: wrap;
  float: left;
}

ul {
  list-style-type: none;
  margin-left: -35px;
}

li {
  display: inline;
}

.filter-button {
  width: 50px;
  margin-bottom: 5px;
}

.filter-button:hover {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchEntry" placeholder="Search">
<input type="submit" id="searchBtn" class="searchButton" />

<ul>
  <li>
    <button class="filter-button" data-filter="all">All </button>
  </li>
  <li>
    <button class="filter-button" data-filter="short">Short </button>
  </li>
  <li>
    <button class="filter-button" data-filter="tall">Tall </button>
  </li>
  <li>
    <button class="filter-button" data-filter="big">Big </button>
  </li>
  <li>
    <button class="filter-button" data-filter="small">Small </button>
  </li>
  <li>
    <button class="filter-button" data-filter="many">Many</button>
  </li>
  <li>
    <button class="filter-button" data-filter="few">Few </button>
  </li>
</ul>
<div class="filter all">
  All of Them
  <hr />
</div>
<div class="filter hidden short">
  Just the Short Ones
  <hr />
</div>
<div class="filter hidden tall">
  All the Tall Ones
  <hr />
</div>
<div class="filter hidden big">
  Only the Big Ones
  <hr />
</div>
<div class="filter hidden small">
  All the Small Ones
  <hr />
</div>
<div class="filter hidden many">
  The Many Ones
  <hr />
</div>
<div class="filter hidden few">
  The Few
  <hr />
</div>


<div class="filter item all big tall">
  Big and Tall
</div>
<div class="filter item all short small">
  Short and Small
</div>
<div class="filter item all big short">
  Big and Short
</div>
<div class="filter item all tall small">
  Tall and Small
</div>
<div class="filter item all big few">
  Big and Few
</div>
<div class="filter item all many small">
  Many and Small
</div>
<div class="filter item all few small">
  Few and Small
</div>
<div class="filter item all short few small">
  Short and Small and Few
</div>
<div class="filter item all big tall many">
  Big and Tall and Many
</div>