Question

当用户将鼠标悬停在具有某个类的锚标记上时，我会显示一个菜单。始终显示相同的菜单，但锚标记具有不同的“accNum”属性。我想从显示菜单的“parent”元素中获取accNum属性的值，并将其附加到其中一个菜单项的click事件中。喜欢的东西;

<a href="#" class="actionLink" onmouseover="$('ActionsMenu').style('display','block');" accNum="11111">Actions</a>
<a href="#" class="actionLink" onmouseover="$('ActionsMenu').style('display','block');" accNum="22222">Actions</a>
<a href="#" class="actionLink" onmouseover="$('ActionsMenu').style('display','block');" accNum="33333">Actions</a>
<div id="ActionsMenu" style="display:none;">
    <a href="#" id="showAccountValues">Show Account</a>
</div>

无论哪个'ActionLink'是为了显示菜单而悬停的那个，我想获取该AccNum值并创建“ShowAccountValues”的onClick事件，如

onClick="showAccountValues('AccNum value of parent');"

任何帮助都会很棒。另外，我假设我必须将它绑定到'ActionLink'的document.ready（）函数，这是有道理的，但我想如果我可以通过它获得任何这将是伟大的。谢谢

Answer 1

首先使用jQuery来连接你的事件，其次accnum不是有效的属性，所以使用这样的data-*属性：

<a href="#" class="actionLink" data-accNum="11111">Actions</a>
<a href="#" class="actionLink" data-accNum="22222">Actions</a>
<a href="#" class="actionLink" data-accNum="33333">Actions</a>
<div id="ActionsMenu" style="display:none;">
    <a href="#" id="showAccountValues" data-accnum="">Show Account</a>
</div>

然后，您可以在每个data元素的悬停时更新#showAccountValues链接的a属性：

$('.actionLink').on({
    click: function(e) { 
        e.preventDefault(); 
        $('#ActionsMenu').show();
    },
    mouseover: function() {
        $('#showAccountValues').data('accnum', $(this).data('accnum'));
    }
});

然后点击a中的#ActionsMenu元素即可获得accnum：

$('#showAccountValues').click(function(e) {
    e.preventDefault();
    showAccountValues($(this).data('accnum'));
});

Example fiddle

获取显示菜单的Hovered元素的属性

1 个答案: