2

次のHTMLコードがあります。これは基本的に、数行で何かをアナウンスし、「[...]」で終了し、下部に「続きを読む」リンクボタンを追加する投稿に関連しています。このボタンをクリックすると、ボタンが消えるにつれて非表示になっている追加のコンテンツがフェードインし、紹介テキストと非表示になっているテキストが表示されたままになります。さて、私はすでにこのためのコードを書いていますが、スニークピークに含めた「[...]」（クリックボタンが発生した投稿から）も削除しようとすると、複雑になります。HTMLは次のとおりです。

<div class="entry">
    <p>Welcome. Talk about something briefly and click below for more. [...]</p>    

    <div class="slide-content">
        <p>Hidden content.</p>
    </div>
    <span id="revealer" class="button"><a href="#">Read more</a></span>
</div>

クラス「entry」と「button」は私のCSSファイルに属し、「slide-content」は私の.jsファイルに属し、fadeIn効果を​​制御します。ID「revealer」も同じ目的で.jsファイルに属しています。このHTMLは、「box」のクラスを持つdivタグでラップされています。これは、各投稿が従う形式であり、同じHTML要素を使用したまったく同じ形式です。アナウンスを行う必要があるたびに、段落タグの間にコンテンツを配置して公開するだけです。ボタンがクリックされた投稿でのみ「[...]」を削除する方法が見つからないため、ここで問題が発生します。次のことを試してみましたが、複数の投稿ですべての「[...]」が削除されました。

$('.entry p').each(function() {
    var textReplace = $(this).text();
    $(this).text(textReplace.replace('[...]', '')); 
});

概要：

  1. ユーザーがクリックした投稿（[続きを読む]ボタン）からのみ「[...]」テキストを削除する必要があります。アイデアは、これを削除すると同時に、非表示のコンテンツをフェードインさせることです。
  2. 私は上記を達成することができましたが、「[...]」のすべてのインスタンスに対して。jQueryコードまたはHTMLを変更して、選択を洗練する必要があります。
  3. オプション3は、この「[...]」を削除することですが、ユーザーにもっと読むコンテンツがあることを知らせるためにそのままにしておきたいので、「続きを読む」ボタンを全部入れたいと思います。一貫性のための投稿。

〜よろしくお願いします！

4

2 に答える 2

1

最初に、あなたはこれらの複数を持っていると言います。その場合、これは：

<span id="revealer" class="button"><a href="#">Read more</a></span>

動作しないでしょう。id属性はドキュメントごとに一意である必要があります。つまり、特定のid値を持つ要素を最大1つ持つことができます。

次のように（ブロックごとに）HTMLを作成する場合：

<div class="entry">
    <p>Welcome. Talk about something briefly and click below for more. [...]</p>    

    <div class="slide-content">
        <p>Hidden content.</p>
    </div>
    <span class="revealer button"><a href="#">Read more</a></span>
</div>

そしてあなたのJSはこのように：

function replace(fromp) {
    var textReplace = fromp.text();
    fromp.text(textReplace.replace('[...]', ''));
}

$('.revealer').click(function() {
   var fromp = $(this).siblings().eq(0);
   replace(fromp);
});

正しく動作します。実例：

お役に立てれば。

于 2012-04-13T01:22:31.240 に答える
0

ページ初期化スクリプトを実行すると、jqueryを使用して、すべての投稿とすべての削除ボタンを選択し、クリックイベントを介してそれらをリンクできます。JSFiddleの例を作成しましたが、その要点は次のとおりです。

var removers = $(".remover")
var posts = $(".post")
for (var i = 0; i < removers.length; i++) {
    $(removers[i]).click( { post: posts[i] },
        function(event) {
            var textReplace = $(event.data.post).text()
            $(event.data.post).text(textReplace.replace('[...]', ''))
        }
    )
}​

これは単純化された例です。投稿とボタンがマークアップで並べ替えられていることを前提としています。

于 2012-04-13T01:31:39.433 に答える