1

私はjqueryの初心者で、スライディングテーブルを作成したいと思っています。元のテーブルには3つのレベルがあります。

<ul class="categories">
<li id="category1">1 element</li>  //parentid=0
<li id="category2">2 element</li>  //parentid=0
<ul>
<li id="category3">1 element of element id2</li>  //parentid=2
<ul>
<li id="category4">1 element id3</li>  //parentid=3
</ul>
</li>
</ul>
</li>
</ul>

最初のレベルの要素にはparentid=0、id = 1 ++があり、次のレベルにはネストされたparentidがあり、独自のidなどがあります。

ページは、parentid=0の1レベルのみで読み込まれます。

<ul class="categories">
<li id="category1">1 element</li>  //parentid=0
<li id="category2">2 element</li>  //parentid=0
</ul>

次に、liをクリックし、id IDを取得します-ファイルに移動し、mysqlを実行し、変数の新しいテーブルを取得し、それを元に戻し、LIの下でslideToggleします。

php側

if(isset($_POST['subcategory'])){
    $subcategory = str_replace('category', '', $_POST['subcategory']);  
    echo build_category_tree($subcategory); // builds the UL tree
}

これは私にIDを返します、私はリストを返してそれを切り替える必要があります。

これで新しいULが接続されましたが、jqueryはそれを処理できず、スクリプトを以下のスクリプトで更新しましたが、まだできません。

更新されたJQuery

    $(".tablecategoryname").on('click', function(){
    var $a = $(this).closest('li').attr('id');
    var $c = $(this).closest('li');

    $.ajax({
       type: "POST",
       url: "functions.php",
       data: {subcategory:$a},
       cache: false,
       success: function(data)
       {
            $(data).hide().insertAfter($c).slideDown(400);
       }
     });    
});
4

2 に答える 2

0

ID には数字だけを含める (または数字で始める) べきではありません。おそらく、#a1または類似のものを使用する必要があります。オブジェクトを送信しているデータパラメータでは、等号は実際には機能しません。

$(".table li").on('click', function(){
    var self = this;
    $.ajax({
       type: "POST",
       url: "functions.php",
       data: {id : self.id},
       cache: false
    }).done(function(data) {
        //guessing you're returning valid HTML
        $(data).hide().insertAfter(self).slideDown(400);
    });
});

編集：

build_category_tree() 関数は HTML を返す必要があるため、それを ajax リクエストにエコー バックできます。

if(isset($_POST['subcategory'])){
    echo $subcategory = str_replace('category', '', $_POST['subcategory']); 
    $ULtree = build_category_tree($subcategory); // builds the UL tree
    echo $ULtree; //echo back to Ajax
}
于 2013-02-15T13:58:45.657 に答える
0

メインULにIDを入れて親をキャッチし、メインUL内のリストを切り替える必要があります。

$("ul.umenu > li).click(function (e) {

    e.preventDefault();

    var element = $(this);

    if (element.parent().find("ul").is(":visible")) {
    } else {

        $("ul.umain> li > ul").slideUp();

        element.parent().find("ul").slideToggle("fast");

    }

});
于 2013-02-15T14:09:23.917 に答える