jquery - 通过自定义 jQuery 下拉菜单将类应用于 img

Question

我正在开发一个小编辑器，我希望能够右键单击图像，然后对其进行操作。

我有自定义右键菜单工作，但我不知道如何告诉 jQuery 我右键单击了哪个项目。

jsFiddle -> http://jsfiddle.net/kthornbloom/YsW8D/1/

代码：

// Make the menu
$('.something img').bind("contextmenu", function(event) { 
    event.preventDefault();
    $("div.custom-menu").hide();
    $('<div class="custom-menu"><a href="#" class="fr">Float Right</a></div>')
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});
});
// Remove the menu
$(document).bind("click", function(event) {
    $("div.custom-menu").hide();
    event.preventDefault();
});

// Apply option to image you right-clicked on
$(document.body).on("click", ".run", function (event) {
    // this won't work, but is what I want to happen.
    $(this).nearest('img').addClass('float-right');
    event.preventDefault();
});

Answer 1

处理程序方法中的this引用事件处理程序所针对的元素

$('.something img').bind("contextmenu", function(event) { 
    event.preventDefault();

    //this refers to the clicked element
    console.log(this)
    $("div.custom-menu").hide();
    $('<div class="custom-menu"><a href="#" class="fr">Float Right</a></div>')
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});
});

演示：小提琴 由于您想知道上下文菜单处理程序中的目标元素，我建议您保存单击的元素引用以供将来参考。jQuery 为使用.data()提供了一个很好的选择

更新

// Make the menu
$('.something img').bind("contextmenu", function (event) {
    event.preventDefault();
    $("div.custom-menu").remove();
    $('<div class="custom-menu"><a href="#" class="fr">Float Right</a></div>')
        .appendTo("body")
        .css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    }).data('target', this);
});
// Remove the menu
$(document).bind("click", function (event) {
    $("div.custom-menu").remove();
    event.preventDefault();
});

// Apply option to image you right-clicked on
$(document.body).on("click", ".fr", function (event) {
    var $target = $($(this).closest('.custom-menu').data('target'));
    $target.addClass('float-right');
    event.preventDefault();
});

演示：小提琴