Question

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

我有一些标题元素只应在选择主题时出现。例如，如果用户选择主题＃3，则主题＃3的结果应该与主题＃3的标题一起显示。如果我执行搜索，标题应该说＆＃34;搜索结果＆＃34;。

我丢失的地方：画廊以所有对象和部分标题开始。在选择部分主题之前，应隐藏部分标题。我上课了＃34;过滤＆＃34;对于所有可见元素。如果我用可见性开始它们：隐藏;他们永远不会出现。如果我不给他们可见性：隐藏;他们永远不会消失。我的功能是显示和隐藏所有＆＃34;当我需要独立于主过滤来切换这些单独的元素时。

这是一个小提示，显示页面加载时的所有标题，当您键入或单击＆＃34;所有＆＃34;。在这些情况下显示的唯一标题应为＆＃34;所有结果＆＃34;。

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引用。

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

Answer 2

这是一个更新的工作代码小提琴： https://jsfiddle.net/ayunami2000/4uw7or7z/

摘自jsfiddle：

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

顺便说一下，我还将visibility:false;更改为display:none;

切换对象的可见性或显示

2 个答案: