Question

例如，我有checkbox可以选中或取消选中。

每当选中它时，我都希望显示HTML列表中的所有元素。
每当没有选中时，我只想显示一些对象（未过滤的），就像其他人不存在一样（我不想要白色空间等）。

HTML（Handlebars）列表：

                <ol>
                    {{#each personList}}
                            <li>{{showPerson this}}</li>
                    {{/each}}
                </ol>

把手助手：

        Handlebars.registerHelper('showPerson', function(person) {
            return person.firstName + " " + person.lastName;
        });

我的过滤功能如下：

    function filterOldPeople(person) {
        return person.age > 60;
    }

我想要实现的是这样的事情：

var filter; // I am getting this boolean value from checkbox
if (filter) {
    doFilter(); // will filter the HTML list that is already rendered
}

现在我不知道函数doFilter()应该如何实现这一目标。现在使用jQuery问题是我可以获得list item的HTML对象而不是实际的person对象，所以这不会起作用：

$( "li" ).filter(filterOldPeople).addClass("hide");

类似的东西正是我所需要的。我如何实现这一目标？

Answer 1

你走了！你唯一想要做的就是将你想要隐藏的所有元素放在一个div中然后隐藏它，隐藏一个元素比隐藏它们更容易。

function check() {
  if (document.getElementById("test").checked == true) {
    document.getElementById("two").style.display = "none";
  } else {
    document.getElementById("two").style.display = "block";
  }
}

<div class="info">

  <div id="one">
    If you click on me, #two will hide.
    <input type="radio" id="test" onclick="check()">
  </div>

  <div id="two">
    Hi, click on the button!
  </div>

</div>

Answer 2

如果您不想使用两个列表，可以使用以下内容进行修改（根据需要添加代码）：

HTML

facecolors='w'

JS

<ul id="theList">
  <li class="number">One</li>
  <li>Red</li>
  <li class="number">Two</li>
  <li>Green</li>
  <li class="number">Three</li>
  <li>Blue</li>
</ul>

<br /><input type="checkbox" id="numbers" checked><label for="numbers">Show Numbers</label>

Answer 3

我将如何处理这个问题：

function filterOldPeople(person) {
    return person.age > 60;
}

// Get all li Elements (useful so we don't have to search the dom multiple times)

var liElements = $("li"); 

// loop through each li and filter it.

function filterAges() { 
   liElements.each(function () { 
      if (filterOldPeople($(this).val())) { 
         $(this).addClass("hide"); 
      } 
   }); 
}

// Show all hidden elements by removing the hide class

function showAll() {
   liElements.removeClass("hide");
}

// Create our event

$("#checkbox").change(function () {
   if ($(this).is(":checked")) {
       filterAges();
   } else {
       showAll();
   }
});

按HTML列表中的属性显示/隐藏对象

3 个答案: