javascript - 右键单击，显示调色板，然后更改颜色并将值写入单击时输入

Question

我是 jQuery 世界的新手，正在努力解决这个问题。

我想要做的是有一个显示简单调色板的右键单击菜单。 Then when a color is selected, the background color of the div changes and stores the style information (e.g. color:red) inside of an input box called 'property'+i其中i是颜色发生变化的div对应的数值。我将如何实现这一点？

我通过单击按钮动态创建可拖动的 div，每个 div 都有一个唯一的 ID 让我们说 D1、D2、D3 等，并将 x、y 位置存储在另外两个输入框内 - 这是通过以下代码完成的。 ..

var i = 1;
$("#AddDesk").click(function() {
  $("<div />", { "class":"desk", id:"D"+i }).draggable({ 
        grid: [10, 10],
        snap: ".drop-target",
        drag: function(){
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                console.log(xPos);
                $('#posX'+$(this).attr("id").replace('D','')).val('x:' + xPos);
                $('#posY'+$(this).attr("id").replace('D','')).val('y:' + yPos);
        }
    })
     .append("<center>D"+i+"</center>")
     .appendTo("#dContainer");
    $("<div />", { "class":"deskdata", id:"data"+i })
        .append($("<input />", { type: "text", id:"name"+i, "class": "data", value: "D"+i }))
        .append($("<input />", { type: "text", id:"posX"+i, "class": "data" }))
        .append($("<input />", { type: "text", id:"posY"+i, "class": "data" }))
        .append($("<input />", { type: "text", id:"property"+i, "class": "data" }))
        .appendTo("#dataContainer");
  i++;
});

这是右键单击菜单代码……

$(document).bind("contextmenu", function(event) { 
    event.preventDefault();
    $("<div class='custom-menu'><b>Background Color:</b><br /><div style=\"width:100%;background-color:blue\">Blue</div><div style=\"width:100%;background-color:aqua\">Aqua</div><div style=\"width:100%;background-color:aquamarine\">Aquamarine</div><div style=\"width:100%;background-color:green\">Green</div><div style=\"width:100%;background-color:darkgreen\">Dark Green</div><div style=\"width:100%;background-color:orange\">Orange</div><div style=\"width:100%;background-color:yellow\">Yellow</div><div style=\"width:100%;background-color:red\">Red</div></div>")
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});
}).bind("click", function(event) {
    $("div.custom-menu").hide();
});

这是一个 fiddle 没有动态创建的东西。

Answer 1

几件事。快到了。

您不需要在每次点击时重新绘制/绑定(bind)菜单。您可以只绘制一次并重复使用。

你应该使用 on()而不是 bind()委托(delegate)善良(比如只显示右键单击动态 .group div 的菜单)。

这是一个 fiddle :http://fiddle.jshell.net/QLyt2/

var colors = [
    "Blue",
    "Aqua",
    "Aquamarine",
    "Green",
    "DarkGreen",
    "Orange",
    "Yellow",
    "Red"
];

var $menu = [];

function buildMenu(){
    var html = [
        "<div class='custom-menu'>",
        "<b>Background Color:</b><br />"
    ];
    for(var i = 0; i < colors.length; i++){
        html.push("<div style=\"width:100%;background-color:" + colors[i] + ";\" class=\"color\">" + colors[i] + "</div>");
    }
    $menu = $(html.join(''))
    .appendTo("body")
    .on("click", ".color", handleClick);   
}

function handleClick(e){
    var targetId = $menu.data("target");
    $("#" + targetId).css({
        "background-color": $(this).css("background-color")
    });
    $("input[name=property"+targetId.replace(/\D/g, '')+"]").val($(this).css('background-color'));
    $menu.hide();   
}

$("#container").on("contextmenu", ".group", function (event) {
    event.preventDefault();
    if ($menu.length == 0){
        buildMenu();
    }
    $menu
        .show()
        .data("target", this.id)
        .css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        });
});
$(document).on("click", function (event) {
    if ($(event.target).closest(".custom-menu").length == 0)
        $menu.hide();
});