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');

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

1 个答案: