2016-09-21 69 views
-1

我想写一些Javascript,当一个div被点击,一个函数被称为该divs ID的参数,该函数工作时,我只是发送硬编码的div ID像这样:事件函数触发通过div ID

$('#areaOne').on('show.bs.collapse', onSectionClick('#areaOne')); 


function onSectionClick(){ 
    var x = $('#areaOne).hasClass('toggled') ? 'false' : 'true'; 
    console.log(x) 
} 

然而,当我尝试这样的:

$('#areaOne').on('show.bs.collapse', onSectionClick('#areaOne')); 


    function onSectionClick(secID){ 
    var x = $(secID).hasClass('toggled') ? 'false' : 'true'; 
    console.log(x) 
    } 

那么函数只要加载页面时调用,而不是当点击的区域。我希望它能以这种方式工作,因为有许多领域应该触发相同的功能。

我很新的Javascript,所以任何帮助,或建议如何以更好的方式做到这一点将不胜感激。

+0

可能重复的[jQuery的.click - 传递参数给用户函数](http://stackoverflow.com/questions/3273350/jquerys-click-pass-parameters-to-user-function) – Xufox

回答

3

问题是您调用该函数而不是给出函数引用。尝试:

$('#areaOne').on('show.bs.collapse', function(){onSectionClick('#areaOne')}); 
1

$('#areaOne').on('show.bs.collapse', onSectionClick('#areaOne')); 

电话onSectionClick,传递'#areaOne',并将其回avlueon,完全相同的方式foo(bar())电话bar并将其返回值到foo

如果你想将它设置由事件调用,你传递一个函数引用,而不是调用的功能,如:

$('#areaOne').on('show.bs.collapse', function() { onSectionClick('#areaOne'); }); 

在你的情况,不过,你可能穿上”我甚至想这样做。相反:

$('#areaOne').on('show.bs.collapse', onSectionClick); 
// Note no() -------------------------------------^ 

...在onSectionClick,使用this.id来获取点击的元素的ID('areaOne'   —添加#如果你需要它)。

如果你有其他的“领域”,你也想挂钩,你可以一次勾起来都:

$('selector-for-all-the-areas').on('show.bs.collapse', onSectionClick); 

...然后你知道哪一个由涉及事件this是指onSectionClick

+0

谢谢,这是真的帮助我现在有$('#areacontainer')。on('show.bs.collapse',onSubSectionClick);然而,当我点击区域时,我得到了areacontainer的id而不是个别区域div – user2320239

+0

@ user2320239:是的,这是因为'this'总是您(有效)将事件挂钩的元素。你可以抛出*事件委托*:'$(“#areacontainer”)。on(“show.bs.collapse”,“selector-that-matches-the-subsection”,onSubSectionClick);'这会使这个'this在事件发生后匹配选择器的元素。更简单的例子:''(“div”)。on(“click”,“span”,function(){...});'在处理程序中,'this'将引用div内被点击的跨度。 –