HTMLリストの属性でオブジェクトを表示/非表示

Question

例えば、私はcheckboxをチェックしたり、チェックを外したりすることができます。

• チェックするたびに、HTMLリストのすべての要素を表示します。
• これはチェックされていないときは、他のものが存在しないように（フィルタリングされていない）一部のオブジェクトを表示するようにしたい（私は空白などがないようにする）。

HTML（ハンドル）のリスト：

   <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

ここに行ってください！ 1つのdivに隠すすべての要素を1つのdivに配置して非表示にするだけで、1つの要素を2つの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

次の2つのリストを使用したくない場合は、（必要に応じて機能するようにコードを追加します）、次のようなものを使用して変更できます。

HTML

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

JS

$('#numbers').change(function() { 
    $('.number').hide(); 
}); 

私はこれに近づくだろうか

https://jsfiddle.net/1ngotz5u/

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