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

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 を避けたかったのですが、それがより良い解決策かもしれません。

どんな助けでも大歓迎です。

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

非表示の div とプレースホルダー div を取り除くために jquery 関数と html の構造を完全に作り直す必要があり、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>

Jクエリ:

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 に答える