如何在锚标签内的js函数调用中传递参数?

Question

这是我的ajax调用：

$.ajax({                                      
url: 'UserList.jsp',                 
success: function(val){
data = JSON.parse(JSON.stringify(val));
var j=0;
var len=shareInfoLen = Object.keys(data).length;
while(j<len){
if(data[j].user){
$online.append("<a href='javascript:chatuser("+data[j].user+")'>'"+data[j].user+"'</a>");
}
j++;
}
},
error:function(val){
alert('fail');
}
});

在 $online.append() 中，当我使用任何参数调用 chatuser() 函数时，它会返回语法错误。请建议我在这种情况下如何传递参数。

Answer 1

我做了一个快速测试，它以这种方式工作正常。检查我的代码段。主要问题是你传递的用户名没有引号(javascript 会将其解释为变量)。

$(document).ready(function() {
	
/**
* Dummy data
*/
var data = [
{ user : 'User 1' },
{ user : 'User 2' }
];
/**
* Dummy chat user function
* @param user
* @param index
*/
function chatuser(user, index) {
console.log(user, data[index]);
}

// Variables
var j   = 0,
len = data.length,
ul  = $('.placeholder');

while(j < len) {
if(data[j].user) {
ul.append(jQuery("<li><a href="javascript:chatuser('" + data[j].user + "', "+j+");">" + data[j].user + "</a></li>")); // Pass the user as a string and the current index in the array
}
j++;
}
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="placeholder"></ul>

我不知道为什么代码片段中没有调用链接内的函数调用，但代码工作正常。

Answer 2

这里有一堆变化。最重要的是：

• 使用var声明data变量，以便它不会泄漏到全局(窗口)对象上。

• 通过在成功处理程序中创建一个函数来保留data数组，从而利用闭包的概念来发挥您的优势。即使在success函数退出后，此函数仍将继续访问您的数组。

• 预处理data数组以删除不需要的整个内容并去除不必要的数据。您的循环将运行得更快，并且闭包变量不会占用那么多内存。

• 不要使用字符串构建 DOM 对象。它很混乱，当您忘记转义特殊字符时会导致很多错误。相反，请使用jQuery的text和attr函数为您处理所有这些。

• 摆脱 while 循环。当你有一个非常方便的forEach函数内置到数组中时，这是不必要的(它还删除了你一开始不需要的额外变量)。

下面是示例代码：

$.ajax({                                      
url: 'UserList.jsp',                 
success: function(val){
var data = JSON.parse(JSON.stringify(val));
if ($.isArray(data)){
// Filter the data array and stip it down to only the data we need
data = data
.filter(function(item){ return ( item && item.user ) ? true : false; })
.map(function(item){ return { user: item.user }; });
} else {
data = [];
}
data.forEach(function(item){
$("<a>")
.text(item.user)
.click(function(){
chatuser(item.user);
})
.appendTo($online);
j++;
});
},
error:function(val){
alert('fail');
}
});