Javascript JQuery事件处理程序在事件发生之前触发

我试图使用for循环将事件处理程序添加到一系列div中。应该发生的是，当我单击一个#containingThumbs div时，它对应的#content div应该显示出来。起初，我遇到了这样一个问题：在for循环中分配事件处理程序意味着无论我单击了什么containingThumbs div，都只会显示最后一个content div

我通过调用外部函数而不是在事件处理程序本身中定义一个函数来修复了这一问题，但由于某种原因，现在每个#containingThumbs div上的所有事件处理程序都会在页面加载后立即启动。在那之后，点击div什么也不做

这是我的HTML：

<div id="containingThumbs">
<div><img src="1.png"></div>
<div><img src="2.png"></div>
<div><img src="3.png"></div>
<div><img src="4.png"></div>
<div><img src="5.png"></div>
<div><img src="6.png"></div>
<div><img src="7.png"></div>
<div><img src="8.png"></div>
<div><img src="9.png"></div>
<div><img src="10.png"></div>
<div><img src="11.png"></div>
<div><img src="3.png"></div>
<div><img src="4.png"></div>
<div><img src="5.png"></div>
<div><img src="6.png"></div>
<div><img src="7.png"></div>
<div><img src="8.png"></div>
</div>

<div id="content">
<div><img src="1.png"></div>
<div><img src="2.png"></div>
<div><img src="3.png"></div>
<div><img src="4.png"></div>
<div><img src="5.png"></div>
<div><img src="6.png"></div>
<div><img src="7.png"></div>
<div><img src="8.png"></div>
<div><img src="9.png"></div>
<div><img src="10.png"></div>
<div><img src="11.png"></div>
<div><img src="3.png"></div>
<div><img src="4.png"></div>
<div><img src="5.png"></div>
<div><img src="6.png"></div>
<div><img src="7.png"></div>
<div><img src="8.png"></div>
</div>

下面是相关的JS/JQuery代码：

function expandDiv(j){
    //first hide all content that is currently displayed, if any
    $("#content div").css("display","none");
    //then display only the right content div
    $("#content div:nth-child("+j+")").css("display","inherit"); 
}

function makeInteractive(){
    for (var i = 0;i<$("#containingThumbs").children().length;i++){
        $("#containingThumbs").on("click","div",expandDiv(i));
    }
}

函数expandDiv（j）{
//首先隐藏当前显示的所有内容（如果有）
$（“#content div”）.css（“显示”、“无”）；
//然后仅显示正确的内容div
$（“#内容分区：第n个子项（“+j+”））.css（“显示”、“继承”）；
}
函数makeInteractive（）{
对于（var i=0；i这一行：

$("#containingThumbs").on("click","div",expandDiv(i));

调用
expandDiv
并将其返回值传递到

上的

，与
foo（bar（））
调用
bar
并将结果传递到
foo
的方式完全相同。传递到

上的

中的应该是函数引用

纠正该代码的几种方法：

如果您只想知道单击了哪个div，所以只想使用
i
，则不需要它；在对
expandTab
的调用中，
此
将引用div的DOM元素。因此，如果您将
expandTab
更改为使用
此
，则只需删除
（i）
在
展开选项卡之后
：

function makeInteractive(){
    for (var i = 0;i<$("#containingThumbs").children().length;i++){
        $("#containingThumbs").on("click","div",expandTab);
        // No (i) ---------------------------------------^
    }
}

这假设
expandTab
期望将该索引作为其第一个参数，并且不使用事件对象

或者，如果您想稍微更改
expandDiv
，可以让jQuery将额外的参数传递给您，如下所示：

函数makeInteractive（）{
对于（var i=0；我现在正在尝试方法1，所以我的代码行是$（“#containingThumbs”）。在（“click”，“div”，expandDiv”）；但是现在我得到了一个“未捕获错误：语法错误，无法识别的表达式：：nth child”错误消息，因为函数输入是一个事件，但我需要一个索引值来知道要显示哪个#content div…同时尝试方法2会给我一个“Uncaught TypeError:Object div没有方法‘apply’”我不理解的错误。方法3…似乎以与页面首次加载时相同的方式触发所有事件，但没有任何可见效果。@user3060388:再次，请参阅上面的注释。您说您尝试了方法1，但您谈到了使用索引，我已清楚地告诉您，使用方法1必须使用
this
。您已经关于使用方法2，但是使用事件对象，我已经清楚地说过“假设
expandTab
期望将该索引作为其第一个参数，而不使用事件对象。”对于方法3，正如我所说的，您将使用
事件.data
作为索引。啊，明白了！非常感谢，我一开始不太明白您的意思，但使用方法1并将expandDiv中的I替换为$（this）。index（）+1成功了！现在它工作得很好。
function makeInteractive(){
    for (var i = 0;i<$("#containingThumbs").children().length;i++){
        $("#containingThumbs").on("click","div",makeHandler(i));
    }
    function makeHandler(index) {
        return expandDiv(index);
    }
}

function makeInteractive(){
    for (var i = 0;i<$("#containingThumbs").children().length;i++){
        $("#containingThumbs").on("click", "div", i, expandDiv);
        // Note the `i` --------------------------^           ^--- no ()
    }
}