$(function(){
$('.div4table tr td.trigger').each(function(){
this.click(function(){
$('#toggle'+index).toggle();
});
});
});
这一块代码难道有问题么,怎么绑定不上点击事件啊?求找bug。。
下面是相关的一块代码
<div class="div4table">
<tr>
<td>#agent_ip#</td>
<td>#ip#/#type#</td>
<td>#tcp_max#/#tcp_min#/#tcp_avg#</td>
<td>#tcp_lost#/#tcp_send#</td>
<td>#icmp_max#/#icmp_min#/#icmp_avg#</td>
<td> #icmp_lost#/#icmp_send#</td>
<td class="trigger">查看/收起</td>
</tr>
<tr id="toggle#i#"><td colspan="7"><div>这个地方要展示的是影藏起来了的其他的信息</div></td></tr>
</div>
补充一下问题我的表格是循环生成的,我会产生许多类名为trigger的TD,而我想每一个对应绑定下面动态生成ID的div。。。
$('.div4table tr td.trigger').each(function(){
this.click(function(){
$('#toggle'+index).toggle();
});
});
});
1)index变量在哪里?
2)this是一个DOM对象,而不是jquery对象
DOM对象也有click方法,但是出入回调函数没有效果
3)上面的代码为没有个td.trigger绑定了一个回调,当多行多列td.trigger时,不是好的写法
修改如下:
//使用事件代理机制 利用事件冒泡,使用div.div4table代理发生在td.trigger上的click事件
$('.div4table').on("click","tr td.trigger",function(){
//为你的td.trigger 添加一个自有属性,记录td的index值,这样不用再去计算
var index=$(this).attr("td-index");
$('#toggle'+index).toggle();
});
自己把它顶上来一下,看今天有没解答。。。
你的index在哪,each里面没有定义啊;还有你本身好像就写错了吧,需求是一个点击查看和关闭的方法吧。你只有一个trigger啊,为什么要遍历,直接点击事件toggle就ok了,如果真的有多个点击事件,你的关系也没对应上,需求不明确
给题主补充一点知识,推荐一个jQuery源码查看器,http://www.css88.com/tool/jQuerySourceViewer/#v=1.7.2&fn=jQuery.each。
题目中的each方法是jQuery.fn.each
,
function (callback, args) {
return jQuery.each(this, callback, args);
}
调用的是jQuery.each
function (object, callback, args) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction(object);
if (args) {
if (isObj) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if (isObj) {
for (name in object) {
if (callback.call(object[name], name, object[name]) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.call(object[i], i, object[i++]) === false) {
break;
}
}
}
}
return object;
}
就针对题目那段代码来讲,只要关注这段代码即可,
for (; i < length;) {
if (callback.call(object[i], i, object[i++]) === false) {
break;
}
}
其中callback是题目中的
function(){
this.click(function(){
$('#toggle'+index).toggle();
});
});
}
那其实可以看到这个callback函数的调用方式是
callback.call(object[i], i, object[i++])
不难看出在函数内部的this是指向object[i]
的,这是一个DOM对象。
为什么是一个DOM对象,这样就要说说jQuery的伪数组的性质了。
表格是循环生成的。百度下on
绑定事件。
存在的bug,一楼都说清楚了。
学会看console啊,一有错日志都打在console上