Why aren't these Dojo hover events working?
I'm new to Dojo (quite experienced in jQuery) for a project, and am working on adding/removing some classes that will change styles for main navigation links and drop-downs.
Here is the code I've written:
dojo.addOnLoad(function() {
dojo.query('#primary-nav > ul > li > div').forEach(function(container) {
var hoverToggles = dojo.query('> a, > ul', container),
link = dojo.query('> a', container);
dojo.connect(link, 'onmouseover', function() {
开发者_运维百科 dojo.addClass(hoverToggles, 'hover');
});
dojo.connect(link, 'onmouseout', function() {
dojo.removeClass(hoverToggles, 'hover');
});
});
});
No code placed into the event handlers is run (console.log, alert). Values for link
and hoverToggles
are correct.
Am I doing something wrong here? Side question: Is there a more Dojo-idiomatic way of doing this?
dojo.query()
returns a NodeList. dojo.addClass()
and the rest work with DOM nodes.
Try something like that:
dojo.addOnLoad(function() {
dojo.query('#primary-nav > ul > li > div').forEach(function(container) {
var hoverToggles = dojo.query('> a, > ul', container),
link = dojo.query('> a', container);
link.onmouseover(function() {
hoverToggles.addClass('hover');
});
link.onmouseout(function() {
hoverToggles.removeClass('hover');
});
});
});
精彩评论