Question

我对jQuery世界很陌生，我正在努力解决这个问题。

我想要做的是有一个右键菜单，显示一个简单的调色板。然后，当选择颜色时，div的背景颜色会更改并将样式信息（例如color:red）存储在名为“property”+ i 的输入框内，其中 i 是颜色已更改的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

看看这个小提琴here。我非常奇怪地做到了。我会列出你在那里所做的事情。

，代码如下，

var idto = "";
$(document).bind("contextmenu", function (event) {
    event.preventDefault();
    $("<div class='custom-menu'><b>Background Color:</b><br /><div style=\"width:100%;background-color:blue\" data-color='blue' >Blue</div><div data-color='aqua' style=\"width:100%;background-color:aqua\"  data-propid='2'>Aqua</div><div data-color='aquamarine' 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"
    });
    idto = event.target.id
}).bind("click", function (event) {    
    $("div.custom-menu").hide();
});

$("body").on('click', ".custom-menu div", function() {
    $("#"+idto+"").css("background", $(this).attr('data-color'));  
    $("input[name=property"+(idto.charAt(1))+"]").val($(this).attr('data-color'));
})

var idto实际上将保存发生右键单击的div的id。这一行是idto = event.target.id

然后我在.custom-menu div上添加了一个点击功能来获取点击的div的颜色。我添加了data-color属性以获取该div的颜色。我已经添加了三个。

现在这种方法实际上存在的问题是这一行

$("input[name=property"+(idto.charAt(1))+"]").val($(this).attr('data-color'));

您甚至可以跳过数据颜色属性并获取该div的背景颜色。这将是获得背景颜色的最佳方式。

我已经使用charAt来确定我必须设置值的输入的索引。如果您有两位以上的数字，则此解决方案将无效。所以我说得最好。

Answer 2

一些事情。它几乎就在那里。

每次点击都不需要重新绘制/绑定菜单。您只需绘制一次并重复使用即可。

您应该使用on()而不是bind()来表示委派善意（例如，仅显示右键单击动态.group div的菜单）。

这是一个小提琴：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();
});

Answer 3

更改此

$（document）.bind（“contextmenu”，function（event）{

到

$（document）.on（bind，“contextmenu”，function（event）{

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

3 个答案: