【发布时间】：2012-06-14 01:16:42
【问题描述】：
我正在尝试从包含无序列表并具有 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;
}
这里是 Jquery：
$(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 进行连续的服务器调用，但这可能是更好的解决方案。
任何帮助将不胜感激。
【问题讨论】：
-
好吧，一旦复选框值通过将 .html(divhidden_bg) 和 .html(divhidden_content) 更改为 append.(divhidden_bg ) 和追加。(divhidden_content)。现在要弄清楚如何让它们仅根据选中的值显示。 jsfiddle.net/Ayjent/ddsjB/8
-
如果前面加上empty()，$('#vv_bg ul.results').empty().append(divhidden_bg);您可以删除内容，但附加似乎有问题
-
感谢 Alex 的建议，我将尝试使用 empty() 函数或 detach()，看看我能做什么。