javascript - 编写可重复使用的代码来创建一个递增的类似按钮

Question

为了本周的一些练习，我尝试创建博客页面的前端。我添加了一些“假的”点赞按钮(它们不附加到 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> 

写这段代码有没有少动手的方法？能让我做的事 在新 span 旁边添加新按钮，两者都具有互补 ID，并且在不更新我的 JavaScript 代码的情况下，让我的网站允许每个按钮自动运行？

我正在努力以最有效的方式写这篇文章。

谢谢!

Answer 1

要使其成为更可重用的组件，请利用类而不是唯一 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(); 来查找按钮的下一个同级按钮，这将消除对“count”类的需要。查看jQuery Docs on Traversal对于许多其他奇妙的方法。

这是一个 fiddle ，展示了它的实际效果:http://jsfiddle.net/bw5LU/