0

私の問題はこれです。<li>サイド<ul>要素のリストを作成します。thouse<li>要素の1つをクリックすると、他の要素は消えます。をクリックする[See all items]と、前のリストが表示されます。しかし、他の要素をクリックしても、何も起こりません。これは、新しい要素をクリックしたときに何をすべきかわからないためです。コールバックが必要です！しかし、このコールバック関数に何を書き込む必要があるのか​​わかりませんか？！

私のコード： http： //jsfiddle.net/cRcNB/。JSセクションには、easying.jsとquicksand.jsがあります。下にスクロールすると（ずっと）、私の（ショート）コードが表示されます。:)

質問に応じて、ここにコードを投稿します。

$(document).ready(function(){   
    var $holder = $('ul.holder');
    var $data = $holder.clone();

    $('ul.holder li').click(
        function(e){
            $holder.quicksand($(this),{
                duration: 800,
            });
        return false;
    }); 
    $('#all').click(
        function(e){
            $new = $data.find('li')
            $holder.quicksand($new,{
                duration: 800
            }
        );
        return false;
    });
})

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li id='all'>[See all items]</li>
    </ul>
    <ul class='holder'>
        <li data-id="1" data-type="a">heaven</li>
        <li data-id="2"data-type="b">love</li>
    </ul>
</body>
</html>

Quiksand1.3.jsとEasing.jsも必要です。

4

2 に答える 2

2

交換してみてください

$('ul.holder li').click(
    function(e){
        $holder.quicksand($(this),{
            duration: 800,
        });
    return false;
});

と：

$('ul.holder').on('click', 'li', function(e){
        $holder.quicksand($(this),{
            duration: 800,
        });
    return false;
});

これにより、クリックハンドラー<ul>が常にDOMにあるにバインドされます。'を削除すると<li>、クリックハンドラも破棄されます。これが問題になる可能性があります。

于 2013-02-19T19:02:20.173 に答える
1

コードのより単純なバージョンは次のとおりです。

マークアップ：

<ul>
    <li id='all'>[See all items]</li>
</ul>
<ul class='holder'>
    <li data-id="1" data-type="a">heaven</li>
    <li data-id="2"data-type="b">Earth</li>
    <li data-id="2"data-type="b">Dirt</li>
    <li data-id="2"data-type="b">Peace</li>
    <li data-id="2"data-type="b">More</li>
</ul>

jQuery：

$("#all").on("click",function(){
    $(".holder li").show("slow");
});
$(".holder li").on("click",function(){
    $(".holder li").not($(this)).hide("slow");
});

JSFiddle： http: //jsfiddle.net/5ChVE/5/

于 2013-02-19T19:15:45.020 に答える