在 JQuery 中创建函数以避免再次编写相同的代码

Question

我目前正在使用 Twitch API，它接收有关特定频道的信息，然后将其添加到 HTML 文档中。预先设置信息的代码被反复使用。我想知道您究竟如何创建一个可以避免重复并在整个文档中被调用的函数？

codepen 可以在这里找到：http://codepen.io/sibraza/pen/AXRRvq

这里是反复使用的 JQuery 代码：

$("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>")

这样的工作是否可行：

function addThis(){

        $("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>")

   }  

然后我可以在每个 $.getJSON 请求之后调用 addThis()。

Answer 1

它可以工作，但您需要将name、logo 和status 作为参数传递给函数。您还可以删除多余的字符串连接：

function addThis(name, logo, status) {
    $("#follower-Info").prepend('<div class="row"><div class="col-md-4"><img src="' + logo + '"></div><div class="col-md-4">' + name + '</div><div class="col-md-4">' + status + '</div></div>');
}  

然后你可以在你的$.getJSON处理程序中调用它：

addThis('Foo', 'bar.jpg', 'online');