順序付けられていないリストを含み、CSS display: none 値 (つまり、非表示の div) を持つ div からコンテンツを取得し、対応するチェックボックスの特定の値に基づいて表示するために、特定のリスト要素をプレースホルダー div に配置しようとしています。リスト要素のクラス。
初期表示時およびチェックボックスがチェックされていない場合、非表示の div 内のすべてのリスト要素がプレースホルダー div に表示されるようにします。
チェックボックスがチェックされている場合、選択したチェックボックスの値をすべて取得し、チェックボックスの値に対応するクラス値を持つリスト要素のみを非表示の div からプレースホルダー div に移動する機能を実行したいと考えています。対応するチェックボックスの値がない非表示の div 内のリスト要素は表示されません。
HTMLは次のとおりです。
<div id="php_hidden_results">
<ul id="vv_bg_results">
<li class="Sauces_Dips_Spreads Latin">Chili Lime Sour Cream</li>
<li class="Main_Dish Latin">Carnitas</li>
</ul>
<ul id="vv_content_wrapper_results">
<li class="Sauces_Dips_Spreads Latin"><div class="vv_content" id="content1">
<h2><a href="/v1.0/recipes/show_recipe.php?idrecipe=22">Chili Lime Sour Cream</a></h2>
<div class="vv_content_box">
<div class='subtitle'>Sauces Dips Spreads: Latin</div>
</div>
</li>
<li class="Main_Dish Latin"><div class="vv_content" id="content2">
<h2><a href="/v1.0/recipes/show_recipe.php?idrecipe=21">Slow Cooker Carnitas</a></h2>
<div class="vv_content_box">
<div class='subtitle'>Main Dish: Latin</div>
</div>
</li>
</ul>
</div>
<div id="test">Replace with checked value</div>
<div class="filterContainerBody">
<b>RECIPE TYPES</b><br />
<div class="horzRule"></div>
<ul class="checkfilter">
<li><input type='checkbox' value='Sauces_Dips_Spreads' />Sauces Dips Spreads</li>
<li><input type='checkbox' value='Main_Dish' />Main Dish</li>
</ul>
<b>CUISINE TYPES</b><br />
<div class="horzRule"></div>
<ul class="checkfilter">
<li><input type='checkbox' value='Latin' />Latin</li>
</ul>
</div><!-- end of filterContainer -->
<div id="vv_bg" class="vv_bg">
<ul class="results">
<li></li>
</ul>
</div>
<div id="vv_content_wrapper" class="vv_content_wrapper">
<ul class="results">
<li></li>
</ul>
</div>
CSSは次のとおりです。
#php_hidden_results
{
display: none;
}
.filterContainerBody
{
width: 240px;
display: block;
background-color: #ffbb00;
}
Jクエリは次のとおりです。
$(document).ready(function() {
$("ul.checkfilter :checkbox").click(function() {
var divhidden_bg_li = $('#php_hidden_results ul#vv_bg_results li');
$(".checkfilter :checkbox:checked").each(function(){
var filtervalue = $(this).val();
var filterclass = $(divhidden_bg_li).filter(filtervalue);
var divhidden_bg= $('#php_hidden_results ul#vv_bg_results').children("." + filtervalue);
$('#vv_bg ul.results').html(divhidden_bg);
var divhidden_content = $('#php_hidden_results ul#vv_content_wrapper_results').children("." + filtervalue);
$('#vv_content_wrapper').html(divhidden_content);
});
});
});
上記のjqueryは、最初のページまたはチェックボックスが選択されていない場合にすべてのリスト要素を表示するわけではなく、最初のチェックで非表示のdivから特定のリスト要素を取得しますが、応答しなくなります. http://jsfiddle.net/Ayjent/ddsjB/5/を参照してください
回避したいディスプレイのプレースホルダーの問題を除いて、正常に機能していた非表示と表示を認識しています。上記の jsfiddle のコードを参照してください (隠し div の li 要素は、以前はプレースホルダー div にありました)。継続的なサーバー呼び出しのために AJAX を避けたかったのですが、それがより良い解決策かもしれません。
どんな助けでも大歓迎です。