1

今週の練習として、ブログページのフロントエンドを作成してみました。いくつかの「偽の」いいねボタンを追加しました (これらのボタンは Facebook には接続されず、隣に配置されたカウンターを上げるだけです)。

すべてが機能しますが、これらのカウンターを構築するために使用した jQuery/JavaScript コードを作成するための、より直接的で再利用可能な方法があると思います。

JavaScript コードは次のとおりです。

<script>
var whichButton = "";
var counter = 0;                        // Adds counters next to each 
var counter2 = 0;                       // "Like" button, and raises
$("button").on("click", function(){     // their values separately.
  whichButton = this.id;                   
  if (whichButton === "button1") {        
    counter++; 
    $("#span1").html(counter);
  } else {
    counter2++
    $("#span2").html(counter2);
  }
});
</script>

...そして、影響を受けるhtmlは次のとおりです。

<button id="button1">Like</button>
<span id="span1"></span>
<button id="button2">Like</button>
<span id="span2"></span>

このコードを書くためのより実践的な方法はありますか? 補完的なIDを使用して、新しいスパンの横に新しいボタンを追加できるようにし、JavaScriptコードを更新せずに、サイトで各ボタンが自動的に機能するようにするものはありますか?

私はこれをできるだけ効率的な方法で書き込もうとしています。

ありがとう！

4

2 に答える 2

2

これをより再利用可能なコンポーネントにするには、一意の ID の代わりにクラスを利用します。

$(".like_button button").on("click", function() {
  var $count = $(this).parent().find('.count');
  $count.html($count.html() * 1 + 1);
});

マークアップで、必要な数のインスタンスを作成しlike_button、HTML を使用して のデフォルト値を設定します0。

<div class="like_button">
  <button>Like</button>
  <span class="count">0</span>
</div>

注: $(this).parent().find('.count');は非常に文字通りのトラバースの例です。代わりに、ボタンの次の兄弟を見つけるために使用できます$(this).next();。これにより、「カウント」クラスが不要になります。他の多くの素晴らしい方法については、Traversal の jQuery Docs を確認してください。

これが実際の動作を示すフィドルです: http://jsfiddle.net/bw5LU/

于 2013-10-21T22:44:58.917 に答える