这是我关于stackoverflow的第一个问题,所以希望我做得对。
我遇到一个问题,变量通过点击事件传递了一个看似奇怪的值。我想出了一个不同的方法,但我很好奇为什么我的原始方法不起作用。我觉得这是JS的一个奇怪的范围规则,所以如果有人能澄清,那就太好了。代码应该在click事件的两个选项卡之间来回切换。如果这已经得到回答,我很抱歉,但在查看别人的问题时,我无法确定这是否与我所遇到的问题相同。
这是我原来的代码,程序启动时tab1
有类active-tab
:
$("#tab1").on('click', {activeTab: $("#tab1").hasClass("active-tab"),
tab1Clicked: true}, changeTab);
$("#tab2").on('click', {activeTab: $("#tab1").hasClass("active-tab"),
tab1Clicked: false}, changeTab);
和其他地方
function changeTab(event) {
var tab1Active = event.data.activeTab;
var tab1WasClicked = event.data.tab1Clicked;
if(tab1Active) {
if(tab1WasClicked)
alert("tab1 active & clicked, no change");
else {
alert("tab1 active, tab2 clicked, change");
$("#tab1").removeClass("active-tab");
$("#tab2").addClass("active-tab");
}
}
else {//tab2 is active
if(tab1WasClicked) {
alert("tab2 active, tab1 clicked, change");
$("#tab2").removeClass("active-tab");
$("#tab1").addClass("active-tab");
}
else
alert("tab2 active & clicked, no change");
}
}
问题在于,虽然.hasClass
次调用返回了正确的结果,但event.data.activeTab
的值始终为true
,因此一旦tab2
点击它从来没有让tab1
再次活跃,因为它一直认为它已经存在,即使该类确实被删除了。我只通过tab1Clicked
通过event.data
并直接在函数$("#tab1").hasClass("active-tab")
中检查changeTab
来解决这个问题,这可能是我从一开始就应该做的,但仍然,有人可以向我解释为什么其他方法不能同样有效吗?
答案 0 :(得分:2)
“data”表达式在设置事件处理程序时评估一次。它们不是(并且不能)为每个实际事件重新评估。这段代码:
$("#tab1").on('click', {activeTab: $("#tab1").hasClass("active-tab"),
tab1Clicked: true}, changeTab);
通过计算该数据对象的值表达式来评估。传递给jQuery .on()
函数的是一个具有两个属性的对象,每个属性都有一个固定值(在本例中为布尔值)。在那之后它们永远不会改变,因为没有初始化属性值的表达式的痕迹。
在这种情况下,最简单的解决方案是简单地将测试移动到函数中,正如您所说。