1

同じページに 2 つの入札 UL 要素があり、それぞれに最大 5 つのリスト アイテムを表示したいと考えています。次に、ユーザーが必要に応じて、Javascript によって動的に作成される「もっと見る」li 要素をクリックして、表示できる他の要素を非表示にします。

以下の要素が私の「ul」セットであるとします。

    <ul class="setOne">
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
    </ul>

    <ul class="setTwo">
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
       <li>List item 1</li>
    </ul>

これが私が使用しているJSコードです。

    $('.setOne').each(function(){ 
    var max = 2;
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="viewmore"><span class="showMore">View more</span><span class="showLess less">Hide</span></li>');

        $('.viewmore').click( function(){
            $(this).siblings(':gt('+max+')').toggle().end().find('span').toggle();
        });

    }else if ($(this).find('li').length === max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="nomore"><span class="End">End</span></li>');
    }else if ($(this).find('li').length < max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="nomore"><span class="End">No Likes</span></li>');
    }

});

ulを使用して 2 つの要素をすべて選択したかったの$('ul')ですが、最後の要素でしか機能しませんul。

4

2 に答える 2

1

jqueryでこれを試すことができます

ライブデモ

http://jsfiddle.net/LhVcc/

于 2012-10-16T09:36:35.663 に答える
0

次にセレクターを使用し、コンテキストを追加して 2 回$('ul')バインドしないようにします。$('.viewmore')

$('ul').each(function(){ 
    var max = 2;
    if ($(this).children('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="viewmore"><span class="showMore">View more</span><span class="showLess less">Hide</span></li>');

        $('.viewmore', this).on('click',  function(){
            $(this).siblings(':gt('+max+')').toggle().end().find('span').toggle();
        });

    }else if ($(this).find('li').length == max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="nomore"><span class="End">End</span></li>');
    }else if ($(this).find('li').length < max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="nomore"><span class="End">No Likes</span></li>');
    }
}); ​

フィドル

于 2012-10-16T09:32:29.113 に答える