0
複数のdom要素に使用されるカスタムコンテキストメニュースクリプトがあります。要素が表示されているときにコンテキストメニューをアタッチし、フォーカスが外れているときはコンテキストメニューを切り離す必要があります。コンテキストメニューのアイテムのクリック機能で使用するオブジェクトを渡すことができるように、関数内に含める必要があります。表示するたびにDOM要素を再作成する必要がないように、これをどのように書くことができますか？ここでは、私がこれまで持っているものです。カスタムjQueryコンテキストメニューの最適化
function showCardContext(card)
{
cardContext = $('<ul>').css({'position': 'absolute', width: '150px', 'z-index': 5}).append(
$('<li>').append($('<a href="#">').html('Flip Over')).click(function(){/* do something with card here */}),
$('<li>').append(
$('<a href="#">').html('Counters'),
$('<ul>').append(
$('<li>').append($('<a href="#">').html('Increment')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Decrement')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Clear')).click(function(){/* do something with card here */})
)
),
$('<li>').append($('<a href="#">').html('Make Note')).click(function(){/* do something with card here */}),
$('<li>').append(
$('<a href="#">').html('Send To'),
$('<ul>').append(
$('<li>').append($('<a href="#">').html('Hand')).click(function(){/* do something with card here */}),
$('<li>').append(
$('<a href="#">').html('Deck'),
$('<ul>').append(
$('<li>').append($('<a href="#">').html('Shuffle In')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('On Top')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('On Bottom')).click(function(){/* do something with card here */}),
)
).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Discard')).click(function(){/* do something with card here */}),
$('<li>').append(
$('<a href="#">').html('Land of Redemption'),
$('<ul>').append(
$('<li>').append($('<a href="#">').html('Yours')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Opponents')).click(function(){/* do something with card here */})
)
).click(function(){/* do something with card here */})
)
),
$('<li>').append($('<a href="#">').html('Remove From Play')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Relenquish Control')).click(function(){/* do something with card here */})
).appendTo($('body')).menu().hide();
$(card.view).bind('contextmenu', function(e){cardContext.css({'left':e.pageX,'top':e.pageY}).show();});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
// Hide Deck Menu
if ((!$clicked.hasClass('card') && !$clicked.parent().hasClass('card')) || e.
{
cardContext.hide();
}
});
}