0

PHP / MYSQLからテキスト出力を取得し、次のjQueryを使用してテキストを制限し、いくつかの表示/非表示効果を実行しました。最初のブロックでは問題なく動作しますが、phpでアイテムをループすると、すべてのブロックが1つの同じコンテンツに変更されます。jQueryを各ブロックに適用する方法はありますか？

function excerpt(str, nwords) {
    var words = str.split(' ');
    words.splice(nwords, words.length - 1);
    return words.join(' ') + '…';
}

var $div = $('.container');
var excerpt = excerpt($div.text(), 30);

$div.data('html', $div.html()).html( excerpt );

$('button').click(function() {
    var isHidden = $(this).text() == 'Show';
    $div.html( isHidden ? $div.data('html') : excerpt);
    $(this).text( isHidden ? 'Hide' : 'Show' );
});​

HTML：

<div class="container">
    Donec vitae mollis leo. Quisque ut metus ac velit porttitor sollicitudin quis mattis purus. Quisque id risus id sem porta gravida eu nec neque. Praesent non odio nibh, vitae tincidunt sapien. Maecenas rutrum mollis mauris, eu condimentum nunc viverra nec. Donec fringilla imperdiet volutpat. Morbi in sem ante. Phasellus libero purus, viverra a aliquam ac, eleifend eu nisl. Etiam quis odio nec quam rhoncus iaculis ac quis velit. Sed ut lacus quis enim tempor ullamcorper. Donec odio ligula, porta et bibendum aliquam, blandit vitae lacus.
        Donec vitae mollis leo. Quisque ut metus ac velit porttitor sollicitudin quis mattis purus. Quisque id risus id sem porta gravida eu nec neque. Praesent non odio nibh, vitae tincidunt sapien. Maecenas rutrum mollis mauris, eu condimentum nunc viverra nec. Donec fringilla imperdiet volutpat. Morbi in sem ante. Phasellus libero purus, viverra a aliquam ac, eleifend eu nisl. Etiam quis odio nec quam rhoncus iaculis ac quis velit. Sed ut lacus quis enim tempor ullamcorper. Donec odio ligula, porta et bibendum aliquam, blandit vitae lacus.
    <div class="myimage">picture</div>
    <div class="myimage">picture</div>
    <div class="myimage">picture</div>
</div>
<button>Show</button>




<div class="container">
  Curabitur sed mauris at eros viverra fringilla in a ipsum. Aliquam erat volutpat. Integer quis arcu mauris. Cras diam dui, porta non egestas in, auctor ornare nunc. Donec quam ligula, vulputate quis sodales ultricies, gravida vitae augue. Ut ut nibh nisi. Phasellus placerat odio sed mauris accumsan tincidunt. Nunc orci eros, posuere sollicitudin posuere eget, condimentum imperdiet mi. Sed ornare felis sit amet lectus viverra at blandit erat aliquam. Sed laoreet ante consequat elit vestibulum commodo. In sed rutrum lorem. Integer sagittis placerat mi, at tristique nunc consectetur sit amet. Quisque nec nulla eget lacus condimentum iaculis eget id neque. Praesent sagittis, elit non porttitor cursus, justo elit lobortis magna, vitae interdum magna arcu et sem.
    <div class="myimage">picture 3</div>
    <div class="myimage">picture 5</div>
    <div class="myimage">picture 6</div>
</div>
<button>Show</button>
​

サンプル：http：//jsfiddle.net/BqesP/

4

1 に答える 1

1

問題は、クリックイベントハンドラー内のコンテナー要素のセット全体を参照していることです。したがって、ボタンがクリックされるたびに、すべての.container要素に関数が適用されます。これを修正するための簡単な変更は次のとおりです。

function excerpt(str, nwords) {
    var words = str.split(' ');
    words.splice(nwords, words.length - 1);
    return words.join(' ') + '&hellip;';
}

var $div = $('.container');

$div.each(function() {
    var theExcerpt = excerpt($(this).text(), 30);
    $(this).data('html', $(this).html()).html( theExcerpt );
});

$('button').click(function() {
    var isHidden = $(this).text() == 'Show';
    var $div = $(this).prev();
    var theExcerpt = excerpt($div.text(), 30);
    $div.html( isHidden ? $div.data('html') : theExcerpt);
    $(this).text( isHidden ? 'Hide' : 'Show' );
});​

関数内にターゲットコンテナを取得することで、影響を与えたい要素のみに影響を与えることができます。

于 2012-11-19T02:16:21.857 に答える