通过自定义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"}); 
}); 

演示：Fiddle 既然你想要知道上下文菜单处理程序中的目标元素，我建议你保存c舔元素参考以供将来参考。 jQuery提供了一个非常好的选择，这样做的使用.data()

UPDATE

// 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(); 
}); 

演示：Fiddle