1

为了这周的一些练习，我尝试创建一个博客页面的前端。我添加了一些“假”的 Like 按钮（它们不附加到 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();改为使用来查找按钮的下一个兄弟，这将消除对“count”类的需要。查看jQuery Docs on Traversal了解许多其他精彩的方法。

这是一个显示在行动中的小提琴：http: //jsfiddle.net/bw5LU/

于 2013-10-21T22:44:58.917 回答
0

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

$(".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>
于 2013-10-21T22:46:05.640 回答