最近要实现一个功能,要在循环显示的页面中,每个都有相同的点击事件,但是我总是得到循环中第一次的值。后来,经查这是是一个属于叫闭包的问题(怕忘了,记一下)。
参考内容如下:
链接
在经过上面指点发现还是有点问题,先放代码吧。
{% for category in categories %}
<tr data-pk="{{ category.pk }}" data-name="{{ category.name }}">
<td class="name-origin">{{ category.name }}</td>
<td>{{category.num}}</td>
<td style="display: none" class="name-id">{{ category.pk }}</td>
<td>
<button class="btn btn-warning btn-xs edit-btn">编辑</button>
<button class="btn btn-danger btn-xs delete-btn">删除</button>
</td>
</tr>
{% endfor %}
上面是html代码,我要分别得到循环每个的category.pk的值,但是我用$(".name-id").text();方法的话,只能得到所有的category.pk的值,关键它们还连在一起。这就造成一个问题,比如,pk分别是,1,2,30,然而我得到的是(1230),分割也不好分割,顺序只能得到(1,2,3,0),很是尴尬。
下面是js:
for(var i=0;i<editBtn.length;i++){
(function(n){ //这个是function里n,即function的形参,也可以换成j,换成什么变量名都无所谓
editBtn[n].onclick=function(){
console.log(i+'-'+n); //i总是等于5,而n则是点击的数
alterback.show();
var pk=$('.name-id');
pk=pk[n];
var pknew=$(pk);
var pknew=pknew.text();
act.click(function () {
var pk=pknew;
var inputvalue=inputvalueok.val();
var inputnum=inputnumok.val();
var name_origin_text=name_origin.text();
console.log(name_origin_text);
myajax.post({
'url':'/cms/edit_recipe_category/',
'data':{
'pk':pk,
'name':inputvalue,
'num':inputnum,
},
'success':function (result) {
if(result['code']===200){
console.log(result);
window.location.reload();
}else{
console.log("没成功哦");
}
},
});
});
}
})(i);//这是循环中的i,被作为参数传入
}
由上面可以看到,在运用闭包的后,
var pk=$('.name-id');
pk=pk[n];
var pknew=$(pk);
var pknew=pknew.text();
我先通过类,name-id拿到各个标签,然后再利用 var pknew=$(pk); 和
var pknew=pknew.text();分别每个的category.pk,这样就可以为后面每个js传递不同的pk了。
以上。