Question

我正在尝试创建一个动态创建标签的功能。以下是该功能的工作原理：

function create_tabs(array_var, target_element){
  /* array_var will be separated with comma
  /* target_element will be appendning the final data in that elemenet
}

所以如果我使用上面的函数如下：

create_tabs('First, Second, Third', 'any_element_class');

如果要将元素附加到类＆＃34; any_element_class＆＃34;以下数据。

<ul class='tabs'>
    <li class='tab-link current' data-tab='first'>First</li>
    <li class='tab-link' data-tab='second'>Second</li>
    <li class='tab-link' data-tab='third'>Third</li>
</ul>

<div id='first' class='tab-content current'></div>
<div id='second' class='tab-content'></div>
<div id='third' class='tab-content'></div>

Answer 1

您可以将第一个参数作为数组传递：

var array_var = ['first', 'second','third'];
create_tabs(array_var, '#any_element_class');

然后在你的函数中循环它：

function create_tabs(array_var, element){
//...loop over array
$(element).append("<li class='tab-link' data-tab='"+array_var[i]+"'>"+array_var[i]+"</li>")
//
}

Answer 2

有点晚了，但还有另一种方法：Jsfiddle

function create_tabs(array_var, target_element){
var array = array_var.split(", ");
$(target_element).append("<ul class = 'tabs'></ul>");
$.each(array,function(i){
  $(target_element+ ' ul').append("<li class='tab-link' data-tab='"+array[i] +"'>"+  array[i] +"</li>")
});
$.each(array,function(i){
  $(target_element).append("<div id='"+array[i]+"' class='tab-content'></div>");
});
};

使用函数创建选项卡

2 个答案: