jQuery如何適用於每個塊

Question

我從PHP/MYSQL獲得了文本輸出，並且我使用以下jQuery來限制文本並執行一些顯示/隱藏效果。它適用於第一個塊，但如果我通過php循環的項目，所有塊都更改爲一個相同的內容，有沒有辦法讓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/

Answer 1

的問題是，你要引用整個集的點擊事件處理中的容器元素。因此，無論何時點擊任何按鈕，您都將該功能應用於所有.container元素。這裏有一個快速的變化來解決它：

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

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'); 
});​ 

通過獲取目標容器內的功能，你可以確保你隻影響您想要的元素來實現。