0

これは簡単だと思いますが、壁に頭をぶつけています。

私は基本的に、jQuery、JSON、およびPHPを使用して動的に生成されたブラウズツリーを作成しています（このアプローチに基づく：http ：//www.electrictoolbox.com/json-data-jquery-php-mysql/ ）。ドロップダウンボックスをulliメニューに変更しました。'a'クリックイベントで、データベースにクエリを実行し、次のデータセットの値を返します。これはすべて機能しています。クリックされたliの下に新しく返されたリストを「ネスト」するのに問題があります。例えば：

<ul id='levelone'>
 <li><a id='cats' href='#'>Cats</a></li>
 <li><a id='dogs' href='#'>Dogs</a></li>
 <li><a id='fish' href='#'>Fish</a></li>
</ul>

ユーザーが「犬」をクリックすると、PHP / JSONイベントがデータベースにクエリを実行し、リストを返します。

<ul id='leveltwo'>
 <li><a id='hounds' href='#'>Hounds</a></li>
 <li><a id='shepherds' href='#'>Shepherds</a></li>
 <li><a id='poodles' href='#'>Poodles</a></li>
</ul>

これは機能しますが、リストをページの「犬」の下にネストされたリストとして表示したいと思います。このような：

<ul id='levelone'>
 <li><a id='cats' href='#'>Cats</a></li>
 <li><a id='dogs' href='#'>Dogs</a></li>
     <ul id='leveltwo'>
      <li><a id='hounds' href='#'>Hounds</a></li>
      <li><a id='shepherds' href='#'>Shepherds</a></li>
      <li><a id='poodles' href='#'>Poodles</a></li>
    </ul>
 <li><a id='fish' href='#'>Fish</a></li>
</ul>

私はさまざまなアプローチを試しましたが、どれもうまくいきません。私が見逃している簡単なボタンがあると確信しています...どんな援助もいただければ幸いです。

レベル2リストを生成するjQueryは次のとおりです。

    function populateAmimalSubcategory() {
    $.getJSON('./includes/browsedata/animalsubcat.php', { animalcategory:       
       $('#ucHidden').val() }, function (data) {
        $("#animalsubcat").append("<ul id='subcatlist'></ul>");
        $.each(data, function (val, text) {
        $("#subcatlist").append("<li><a href='#' id='" + this.use_subcategory + "'>" + this.use_subcategory + "</a></li>");
        });
    });

これにより、レベル1のdiv内のアイテムがクリックされたときに関数が呼び出されます。

    $('#animallist a').live('click', function(){
        document.getElementById('ucHidden').value = this.id;
        $('#animalsubcat').empty();
        populateAnimalSubcategory();
    });

KMT

4

1 に答える 1

0 
$('body').on('click', "#animallist > li > a", function(){
    var myli = $(this).parent();
    $('.animalsubcat', myli).remove();
    populateAnimalSubcategory(myli);
});

function populateAmimalSubcategory(myli) {
    $.getJSON('./includes/browsedata/animalsubcat.php', {
        animalcategory: $('#ucHidden').val()
    }, function (data) {
        $(myli).append("<ul class='animalsubcat'></ul>");
        $.each(data, function (val, text) {
            $(".animalsubcat", myli).append("<li><a href='#' id='" + this.use_subcategory + "'>" + this.use_subcategory + "</a></li>");
        });
    });
}
于 2013-01-10T15:29:31.747 に答える