javascript - Jquery:将 3 个数组转换为具有不同 ID 的不同对象

Question

我一直在玩弄一个非常简约的 jquery 管理区域菜单。问题是我希望 jQuery 构建 3 个具有不同 ID 的相同菜单。我设法通过创建一个函数并使用不同的变量调用它 3 次来做到这一点，但我想问这个可爱的社区的第一个问题:

创建 3 个具有不同 ID 和内容的元素的最简单、最有效的方法是什么？

d=['Varer','Kate','Produ','Tilbud','Sider','Info','Pref'];

e=['Varer1','Kate1','Produ1','Tilbud1','Sider1','Info1','Pref1'];

f=['Varer2','Kate2','Produ2','Tilbud2','Sider2','Info2','Pref2'];

function menu(){
var e='';
$.each(d,function(a,b){e+='<a href=#'+b+'>'+b+'</a>'});
$('body').append('<div id=c>'+e+'</div>');}
menu();

提前致谢

Answer 1

你的方法其实很好。但请记住以下问题:

缺少 var 关键字将使变量成为全局变量。

var d = ['Varer' ..];

保持功能独立于外部环境。将数组作为参数传递。

function menu(array) {

}

将 id 作为参数传递给当前似乎为所有 div 分配 id“c”的函数。

function menu(id, dataArray) {

}

每次您向字符串添加内容时，都会创建一个新字符串。一种更快的方法是将这些字符串添加到一个数组中，并在最后加入它们。下面是 menu 函数，牢记以上所有要点。

function menu(id, data) {
    var links = $.map(data, function(value) {
        return  '<a href="#' + value + '">' + value + '</a>';
    }).get();

    var div = $('<div>', { 
        id: id,
        html: links.join('')
    });
    $('body').append(div);
}

简约代码并不意味着您应该使用一个字母的变量名。将其留给缩小器。

menu('firstId', d);
menu('secondId', e);
menu('thirdId', f);