テキストブロックに「###」が表示されている場合は、それを画像に置き換えたいです。その後、クリックするとすべてが非表示になり、すべてがフェードインし、別の画像が追加され、readmore 画像が非表示になり、readless 画像をクリックすると表示されます、テキスト スライドアップ、および readmore 画像が再び表示されます。
ここに例があります: http://jsfiddle.net/TkPt6/7/
すべてが 1 つの要素だけで正常に機能しますが、### を複数の要素に追加する可能性があるはずですが、問題があります。
影響を受ける要素のみに影響を与えるためにそれを適用する方法は?
ところで、より良いコードを書くにはどうすればよいでしょうか?
それは私の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');
})
}
})