0

Twitterブートストラップを使用したいいねリンクがあります。

 <a href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>

  When the user clicks on like link the value within the span should be incremented.

すべてのコメントにいいねボタンがあるので、どのスパンを更新するかを確認する方法があるため、単一の JavaScript からこのタスクを実行する方法がわかりません。

また、もう 1 つ、href="#" のハイパーリンクとしてこのようなボタンがあります。そのため、いいねリンクをクリックするたびにページがトップにジャンプします。どうすれば問題を解決できるか考えてください。

4

3 に答える 3

4

2番目の問題には、使用できます <a href="javascript:void(0)">

最初の問題ですが、いいねボタンはどこにありますか? 各スパンに常に一意の ID を割り当ててから、いいねボタンをクリックすると、次のように使用できます。 document.getElementById("spanUiqueId").innerHTML = parseInt(document.getElementById("spanUiqueId").innerHTML)+1;

于 2013-03-02T21:17:08.693 に答える
2

既存の dom 構造については、

$('.icon-thumbs-up').parent('a').click(function() {
     var count = parseInt($('badge').text())+1;
     $('badge').text(count);
}

id または class を a に与えたい場合は、 $('.icon-thumbs-up').parent('a') を新しいセレクターに置き換えます

ここで説明する 2 つのこと:

最初: parseInt は、数値がインクリメントのために渡されることを確認します。これは、js でサイレント エラーが発生し、カウンターの間違った値 tu テキストが渡され、ページが壊れる可能性があるため、推奨される方法です。

2番目: ++ の代わりに +1 を使用します。これは、++ と -- が多くの場合に不安定になる傾向があるためです。

于 2013-03-02T21:45:19.403 に答える
0

そのためにjQueryを使用できます：

タグに「 likeLink <a>」などのクラスを設定します。

<a class="likeLink" href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>
<script>
$("a.likeLink").click(function() {
    $(this).next().text($(this).next().text()+1);
});
</script>

$(this).next()要素の次の兄弟、この場合は<span>.

2 番目の質問ですが、いいねボタンに何をしてもらいたいですか? リンクとして表示したいだけの場合は、リンクの「href」属性を変更できます。

<a href="javascript:void('0')">

これは何もしませんが、リンクを保持します。

于 2013-03-02T21:19:27.953 に答える