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

问题描述 投票:1回答:2

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

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

谢谢!

javascript jquery code-reuse
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/


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>
© www.soinside.com 2019 - 2024. All rights reserved.