单击，选择并克隆到另一个字段答案

【问题标题】：Click , Select and Clone to another field单击，选择并克隆到另一个字段
【发布时间】：2014-03-06 01:04:27
【问题描述】：

我想创建一个场景，通过单击和选择选项来帮助我复制一些项目。

这里是JSFiddle，如果您继续看现场的话。您会看到 1 个红色、1 个蓝色和 1 个绿色框。

#container {
    width:500px;
    height:600px;
    display:block;
}
#red {
    display:inline-block;
    width:50px;
    height:50px;
    background-color:red;
}
#blue {
    display:inline-block;
    width:50px;
    height:50px;
    background-color:blue;
}
#green {
    width:350px;
    height:350px;
    background-color:green;
}

HTML：

<div id="container">
    <div id="red"></div>
    <div id="blue"></div>
    <div id="green"></div>
</div>

我的目的是通过单击“ONCE”选择蓝色或红色的小框之一，当我单击绿色框内的任意位置时，我想在其中克隆。例如，如果我点击红色，它必须被选中，当我在绿色框内点击时，我必须克隆它的次数与我在框内点击的次数一样多。

我应该遵循哪种方式来执行此操作以及我应该开始搜索该方法的哪种标题？

我找到了以下链接，但对了解这个想法没有多大帮助； http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

非常感谢您从现在开始的帮助。

【问题讨论】：

标签： html css select click clone

【解决方案1】：

我想出了一个办法来处理这个案子。如果没有 Javascript，您将无法处理它。而在这里我使用了 jQuery，这是我的逻辑：

1) 我创建了一个全局变量 isRedOrBlue 来识别用户选择的元素。每当我点击 red 或 blue div 时，我都会相应地更改它。

var isRedOrBlue;
$('#red').on('click', function () {
    isRedOrBlue = "red";
    // For identification, I'm adding border
    $(this).css({
        "border": "1px solid #ccc"
    });
    //Vice versa I'm removing for other
    $('#blue').css({
        "border": ""
    })
});
$('#blue').on('click', function () {
    isRedOrBlue = "blue";
    // For identification, I'm adding border
    $(this).css({
        "border": "1px solid #ccc"
    })
    //Vice versa I'm removing for other
    $('#red').css({
        "border": ""
    })
});

2) 现在当我点击green div 时，基于isRedOrBlue 变量我将是cloning 它和appendTo 把它转成绿色的div。

$('#green').on('click', function () {
    if (isRedOrBlue) { // When none selected
        console.log(isRedOrBlue)
        $('#' + isRedOrBlue).clone().appendTo($(this));
    }
});

JSFiddle

希望你能理解我上面使用的逻辑。

【讨论】：