编写可重用的代码以创建递增的“喜欢”按钮

writing reusable code to create a like button that increments

本文关键字：喜欢 按钮 创建 代码      更新时间：2023-09-26

为了本周的一些练习，我尝试创建博客页面的前端。我添加了一些"假"喜欢按钮（它们不会附加到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 代码的情况下，我的网站是否允许每个按钮自动运行？

我正在尝试以最有效的方式编写此内容。

谢谢！

要使其成为更可重用的组件，请利用类而不是唯一 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 了解许多其他精彩的方法。

这里有一个小提琴在行动中展示这一点：http://jsfiddle.net/bw5LU/

当然，用类或其他属性标记所有喜欢的按钮，以便我们可以选择：

$(".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
});

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

<div class="like-button">
    <button>Like</button>
    <span class="count"></span>
</div>
相关文章：