0

I have a menu that is displayed when a user hovers over an anchor tag with a certain class. The same menu is always displayed, but the anchor tags have a different "accNum" attribute. I want to get the value of the accNum attribute from the "parent" element that displayed the menu and append it to the click event of one of the menu items. Something like;

<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>

Whichever 'ActionLink' is the one hovered over to display the menu, i want to take that AccNum value and create the onClick event of "ShowAccountValues" something like

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

any help would be great. Also, I assume I have to bind this to the document.ready() function for 'ActionLink' which makes sense, but i figured if i could get any of it through this that would be great. Thank you

4

1 回答 1

0

首先使用 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属性：#showAccountValuesa

$('.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'));
});

示例小提琴

于 2013-10-11T14:47:19.213 回答