1

テキストブロックに「###」が表示されている場合は、それを画像に置き換えたいです。その後、クリックするとすべてが非表示になり、すべてがフェードインし、別の画像が追加され、readmore 画像が非表示になり、readless 画像をクリックすると表示されます、テキスト スライドアップ、および readmore 画像が再び表示されます。

ここに例があります： http://jsfiddle.net/TkPt6/7/

すべてが 1 つの要素だけで正常に機能しますが、### を複数の要素に追加する可能性があるはずですが、問題があります。

http://jsfiddle.net/TkPt6/6/

影響を受ける要素のみに影響を与えるためにそれを適用する方法は?

ところで、より良いコードを書くにはどうすればよいでしょうか?

それは私のjsコードです:

$('div.ce_text p').each(function() {
    if($(this).text().indexOf("###") > -1) {
        var readmore = '<p class="more">more</p>';
        var readmoreselector = 'p.more';
        var readless = '<p class="less">less</p>'
        var readlessselector = 'p.less';

        $(this).nextAll().wrapAll('<div class="more_content">');
        $(this).replaceWith(readmore);

        var hiddentext = $('div.more_content');
        $(hiddentext).append(readless);
        $(readmoreselector).click(function(){
            $(hiddentext).slideDown('slow');
            $(readmoreselector).css('display','none');
        })
        $(readlessselector).click(function(){
            $(hiddentext).slideUp('slow');
            $(readmoreselector).css('display','block');
        })            

    }
})
4

2 に答える 2

0

これを変える： 

$(hiddentext).slideDown('slow');

これに：

$(this).next().slideDown('slow');

デモ: http://jsfiddle.net/TkPt6/9/

于 2013-03-15T20:40:22.900 に答える
0

既存のコードを使用して、個々のセクションで機能するように修正できました。

さらに、less各セクションに反復ごとに が追加されるという論理的なバグもありました。これにより、既に完了した前のセクションに複数回追加されます。

on()just の代わりに委譲を使用するとclick、クリック イベント バインディングを each ループの外側に移動できp.moreますp.less。

現在のスコープを使用するようにイベントを更新して、click現在のスコープに関連する要素のみに影響を与えます。

$('div.ce_text p').each(function () {
    var $this = $(this); // cahced $(this);

    if ($(this).text().indexOf("###") > -1) {
        var readmore = '<p class="more">more</p>';
        var readmoreselector = 'p.more';
        var readless = '<p class="less">less</p>'
        var readlessselector = 'p.less';

        $this.siblings().last().after(readless); // fixed the issue of duplicated less
        $this.nextAll().wrapAll('<div class="more_content">');
        $this.replaceWith(readmore);
    }
})

// moved this outside the each as those can be bound using `on` with delegation
$('div.ce_text').on('click', 'p.more', function () {
    $(this).next().slideDown('slow');
    $(this).css('display', 'none');
})

// moved this outside the each as those can be bound using `on` with delegation    
$('div.ce_text').on('click', 'p.less', function () {
    $(this).parent().slideUp('slow');
    $(this).closest('div.ce_text').find('p.more').css('display', 'block');
})

デモ

これを行うには多くの方法があると思いますが、既存のコードを可能な限り使用しようとしました。

于 2013-03-15T20:45:32.077 に答える