是否可以使用JavaScript同时触发2个事件?
我试图同时触发2个事件,方法是单击右侧导航上的“过去的位置”链接,跳转到底部页面的“过去的位置”部分,同时发送默认图像地图(印第安纳波利斯地图) 目前,它跳到页面底部很好,但是图像地图消失了——只是地图的占位符中没有显示任何内容 HTML-其他两个工作链接路由图像映射是否可以使用JavaScript同时触发2个事件?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图同时触发2个事件,方法是单击右侧导航上的“过去的位置”链接,跳转到底部页面的“过去的位置”部分,同时发送默认图像地图(印第安纳波利斯地图) 目前,它跳到页面底部很好,但是图像地图消失了——只是地图的占位符中没有显示任何内容 HTML-其他两个工作链接路由图像映射 <li class="j_linkHover"> <a href="#mapCO-asp" class="j_linkThumb">Aspen, CO</a> <p class="
<li class="j_linkHover">
<a href="#mapCO-asp" class="j_linkThumb">Aspen, CO</a>
<p class="j_accordion-panel"><span class="j_dateLocation">Central Regions<br>May 29 - June 3</span></p>
</li>
<li class="j_linkHover">
<a href="#mapOR" class="j_linkThumb">Salem, OR</a>
<p class="j_accordion-panel"><span class="j_dateLocation">Oregon School for the Deaf,<br>Washington School for the Deaf, <br> Non-Profit Community Event<br>June 3 - 6</span></p>
</li>
<li class="j_linkHover">
<a href="javascript: document.body.scrollIntoView(false);" id="location-color" class="j_linkThumb is-active">Past Locations</a> <--- jumps to the bottom, but cannot route image map at the same time
</li>
要重用相同的功能,请在功能中定义它:
function routeImages (elem) {
$("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
$(elem).addClass("active"); //Add "active" class to selected tab
$(".mapActive").css({'display':'none'}); //Hide all tab content
var activeTab = $(elem).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn('fast'); //Fade in the active content
}
现在您的旧代码变成这样:
//On Click Event
$("ul.j_linkLocation li").click(function() {
routeImages($(this));
});
然后为列表项添加单击侦听器:
$('#location-color').parent('li').on('click', function() {
//the first event
$('body').scrollIntoView(false);
//call the function for routing images
routeImages($('ul.j_linkLocation li:first'));
});
要重用相同的功能,请在函数中定义它:
function routeImages (elem) {
$("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
$(elem).addClass("active"); //Add "active" class to selected tab
$(".mapActive").css({'display':'none'}); //Hide all tab content
var activeTab = $(elem).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn('fast'); //Fade in the active content
}
现在您的旧代码变成这样:
//On Click Event
$("ul.j_linkLocation li").click(function() {
routeImages($(this));
});
然后为列表项添加单击侦听器:
$('#location-color').parent('li').on('click', function() {
//the first event
$('body').scrollIntoView(false);
//call the function for routing images
routeImages($('ul.j_linkLocation li:first'));
});
是的。。。使用jQuery,这是一个JavaScript库。。。可以将多个
事件
附加到元素
$([element selector]).on([events... space separated], [Delegated selector], function([arg]){
// Whatever to execute
});
更具体的示例(用于语法):
阅读jQuery
这是我所知道的最完整的
额外阅读的内容是关于……是的。。。使用jQuery,这是一个JavaScript库。。。可以将多个
事件
附加到元素
$([element selector]).on([events... space separated], [Delegated selector], function([arg]){
// Whatever to execute
});
更具体的示例(用于语法):
阅读jQuery
这是我所知道的最完整的
额外的阅读将是关于…这不是jQuery的专利-简单的Javascript和多个addEventListener可以做到这一点。@Nillus:当然。。。但是使用jQuery很容易。。。现在,使用jQuery可以实现的任何功能都可以通过vanilla JS实现。它不是jQuery的专利——使用多个addEventListener的简单Javascript可以做到这一点。@Nillus:当然。。。但是使用jQuery很容易。。。现在,使用jQuery可以实现的任何功能都可以通过vanilla JS实现。我认为这有机会实现循环。。。在
上单击
->触发器单击
看起来很可怕。-作为点击“转发器”。。。这也是一个不好的建议。@Louyspatricebeset如果你是对的,我错过了这个。一种更好的方法是将它们放在一个函数中,然后从多个侦听器调用该函数。更新了答案。@Sam Battat-您的第一个代码不起作用,但“单击侦听器”代码工作得很好!单击“过去位置”时,图像地图仍保留在那里,并显示在页面底部。我接受你的回答!我认为这有机会循环。。。在上单击
->触发器单击
看起来很可怕。-作为点击“转发器”。。。这也是一个不好的建议。@Louyspatricebeset如果你是对的,我错过了这个。一种更好的方法是将它们放在一个函数中,然后从多个侦听器调用该函数。更新了答案。@Sam Battat-您的第一个代码不起作用,但“单击侦听器”代码工作得很好!单击“过去位置”时,图像地图仍保留在那里,并显示在页面底部。我接受你的回答!