0

我正在尝试从包含无序列表并具有 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 进行连续的服务器调用，但这可能是更好的解决方案。

任何帮助将不胜感激。

4

2 回答 2

1

试试这个例子：

$(document).ready(function() {
$('input:checkbox').change(
            function(){
        var vv_bg = $('.vv_bg').find('.'+$(this).val()).html();
        var vv_content = $('.vv_content_wrapper').find('.'+$(this).val()).html();
                if ($(this).is(':checked') && (vv_bg != null && vv_content != null)) {
                    $('<li>'+vv_bg+'</li>').attr('class',$(this).val()).appendTo('#result_vv_bg ul');   
            $('<li>'+vv_content+'</li>').attr('class',$(this).val()).appendTo('#result_vv_content_wrapper ul');
                }
                else {
                    $('#result_vv_bg li:contains('+$(this).val()+')').remove();
            $('#result_vv_content_wrapper li:contains('+$(this).val()+')').remove();    
                }
            });     
});

小提琴 ->小提琴

于 2012-06-12T06:52:19.170 回答
0

我不得不完全重写 jquery 函数和 html 的结构，以摆脱隐藏的 div 和占位符 div，并使用了 delegate()、appendTo()、empty() 和 detach 函数，如下所示：

HTML

<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 class="Sauces_Dips_Spreads Latin">Chili Lime Sour Cream</li>
    <li class="Main_Dish Latin">Carnitas</li>          
</ul>
</div>

<div id="vv_content_wrapper" class="vv_content_wrapper">
<ul class="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>

​​​​​​​​​​​​​​​​​​​​

var $lis_bg;
var $lis_content_wrapper;

$('.checkfilter').delegate('input:checkbox', 'change', function() {

if (!$lis_bg){ 
    $lis_bg = $('#vv_bg ul.results > li').detach();
    $lis_content_wrapper = $('#vv_content_wrapper ul.results > li').detach();
};
$('#vv_bg ul.results').empty();
$('#vv_content_wrapper ul.results').empty();

if ($('input:checked').length == 0) {
    $lis_bg.appendTo('#vv_bg ul.results');
    $lis_content_wrapper.appendTo('#vv_content_wrapper ul.results');
    $lis_bg = null;
    $lis_content_wrapper = null;
} else {
    $('input:checkbox').each(function(i, chk) {
        if (chk.checked) {
            $lis_bg.filter('.' + $(chk).attr('value')).appendTo('#vv_bg ul.results');
            $lis_content_wrapper.filter('.' + $(chk).attr('value')).appendTo('#vv_content_wrapper ul.results');
        } 
    });

}
});​
于 2012-06-11T18:07:05.383 回答