首页 > 关于jQuery选择器的问题

关于jQuery选择器的问题

$(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上

【热门文章】
【热门文章】