Javascript 从单击的项复制div类并插入到另一个div中

我目前有一个

的列表。每个
都将定义一个颜色类，例如：
.color blue
，
。color red
，
。color green
-如下所示：

<ul id="listings">
  <li class="layer block color-blue" id="item-1"></li>
  <li class="layer block color-red" id="item-2"></li>
  <li class="layer block color-green" id="item-3"></li>
</ul>

您可以使用（jQuery）：

或

试一试


更新（因为Sai指出它在Firefox中不起作用）：

要在Firefox中工作，请尝试以下方法：

document.getElementById("listings").addEventListener("click", function(e) {
   var target = e.target || e.srcElement;
   alert(target.className);
});

或。。。您不能使用jQuery，因为它不在原始问题中，不必要地包含它将是浪费

以下是一个适用于vanilla JS的解决方案：

本质上，因为你要把颜色集中到其他类中，你必须把它们分割成一个数组，并对它们进行迭代，直到找到一个以“color-”开头的类。我建议您改用自定义属性，如
data color=“blue”
，因为这意味着您可以通过以下方式检索它：

e.target.getAttribute('data-color');

大概是这样的：

document.getElementById("listings").addEventListener("click", function(e) {
    var el = e.target;
    if (el.tagName == "LI") { // Use only li tags
        for (i=0; i < el.classList.length; i++) {
            if (~el.classList[i].indexOf('color')) {
                var color = el.classList[i];
                console.log('color class found: '+color);
                break;
            }
        }
    }
});

document.getElementById（“列表”）.addEventListener（“单击”），函数（e）{
var el=e.target；
如果（el.tagName==“LI”）{//只使用LI标记
对于（i=0；i

我在这里没有看到任何jQuery标记，只需读出类名，请参见：
document.getElementById("listings").addEventListener("click", function(e) {
   alert(e.srcElement.className);
});

document.getElementById("listings").addEventListener("click", function(e) {
   var target = e.target || e.srcElement;
   alert(target.className);
});

e.target.getAttribute('data-color');

document.getElementById("listings").addEventListener("click", function(e) {
    var el = e.target;
    if (el.tagName == "LI") { // Use only li tags
        for (i=0; i < el.classList.length; i++) {
            if (~el.classList[i].indexOf('color')) {
                var color = el.classList[i];
                console.log('color class found: '+color);
                break;
            }
        }
    }
});