Question

对于本周的一些练习，我尝试创建博客页面的前端。我添加了一些“假的”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代码的情况下，我的网站是否允许每个按钮自动运行？

我试图以最有效的方式写这个。

谢谢！

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了解其他许多精彩方法。

这是一个小提琴，表明在行动中：http://jsfiddle.net/bw5LU/

Answer 2

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

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

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

2 个答案: