Question

我目前有一个<li>的列表。每个<li>都会定义一个颜色类，例如：.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>

如何复制/获取所点击的特定<li>项目的颜色类？

我有我的点击监听器，并且知道如何获得<li "id">但是对特定班级不确定。

/* Click listener */
document.getElementById("listings").addEventListener("click", function(e) {
  //console.log(e.target.id + " was clicked");
});

Answer 1

你可以使用（jQuery）：

$('ul').find('li.layer block color-blue')

或者

$('ul#listings').find('li.layer block color-blue')

Answer 2

尝试

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

DEMO

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

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

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

DEMO2

Answer 3

或者......你不能使用jQuery，因为这不是原始问题，并且不必要地包含在内。

这是一个适用于vanilla JS的解决方案： jsFiddle Example

基本上是因为你在其他类中混淆了颜色，你必须将它们分成一个数组并迭代它们，直到找到一个开始'color-'的那个。我建议您使用自定义属性，例如data-color="blue"，因为这意味着您可以通过以下方式检索它：

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

Answer 4

这样的事情：

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

http://jsfiddle.net/bHJ3n/

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

4 个答案: