切换对象的可见性或显示 [英] Toggle visibility or display of objects

问题描述

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

I have a group of objects acted on with data filters to search and filter. JavaScript toggles the visibility of the objects to make the searching and filtering happen.

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

I have some title elements that should only appear when their subject is selected. For instance if the user chooses topic #3 the results for topic #3 should be shown with the title for topic #3. If I perform a search the title should say "search results".

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

Where I'm lost: the gallery starts with all objects and section titles in place. The section titles should be hidden until their section topic is selected. I have class "filter" for all visible elements. If I start them out with visibility: hidden; they never show up. If I don't give them visibility: hidden; they never go away. My function is showing and hiding "all" when I need to toggle these individual elements independently of the main filtering.

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

Here's a fiddle showing all the titles on page load, and when you type or click "all". The only title showing in these cases should be "All results".

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

JavaScript：

The 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();

    });

推荐答案

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

A property rule for display needs to be written in .hidden CSS class. However, this is not enough because specificity. You may need to wrap the titles in another div with id to get around this.

如果你不反对使用！important ，你有这样的解决方案。

If you're not so opposed to using !important, you have a solution like this.

为简洁起见，删除了sessionStorage引用这里缺乏支持。

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>

这篇关于切换对象的可见性或显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！