Javascript 编写可重用代码以创建一个类似于按钮的增量

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

var whichButton=“”；
变量计数器=0；//在每个计数器旁边添加计数器
变量计数器2=0；//“喜欢”按钮，并提高
$（“按钮”）。在（“单击”）上，function（）{//分别显示它们的值。
whichButton=this.id；
如果（whichButton==“button1”）{
计数器++；
$（“#span1”）.html（计数器）；
}否则{
柜台2++
$（“#span2”）.html（counter2）；
}
});

…以下是它影响的html：

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

Like
喜欢

有没有一种更少动手的方法来编写这段代码？一些能让我 在新跨距旁边添加新按钮，这两个按钮都带有补充ID，并且在不更新JavaScript代码的情况下，我的站点是否允许每个按钮自动运行

我正试图以最有效的方式写这篇文章

---

谢谢

要使其成为一个更可重用的组件，请利用类而不是唯一的ID

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

在标记中，创建所需数量的

like_按钮

实例，并使用HTML设置

0

的默认值

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

喜欢
0

注意：

$（this.parent（）.find（'.count'）

是一个非常直观的遍历示例。您可以使用

$（this）.next（）
这里有一个小提琴显示了它的作用：
当然，用class或其他属性标记所有的like按钮，这样我们就可以选择like：

$(".like-button").on("click", function(e){
    var $counter = $(this).find(".count");
    var count = $counter.text() | 0; //corose current count to an int
    $counter.text(count + 1);//set new count
});

现在，要创建新的like按钮，请在html文档中的任意位置添加以下代码段：

<div class="like-button">
    <button>Like</button>
    <span class="count"></span>
</div>


喜欢
非常感谢！自从我开始学习jQuery以来，这就更有意义了。