javascript - 更改时附加数据属性监听器

Question

我有四个附加 div，第一个具有事件类。

<div class="col active" data-column="1"></div>
<div class="col" data-column="2"></div>
<div class="col" data-column="3"></div>
<div class="col" data-column="4"></div>

我设置了一个点击功能，这样您单击的任何列(假设它不是当前事件的 div)都会丢失事件类并将其添加到您单击的任何 div 中。

话虽如此，我正在尝试设置一个监听器(请记住所有这些 div 都是基于先前/不相关的单击事件附加的)，以便任何具有“active”类的数据列都使用 switch 语句来将一些文本记录到控制台。

var columnListener = $('.col').attr('data-column');
$(document).on('change', columnListener, function() {
  if ( $(columnListener).hasClass("active") ) {
    switch(columnListener) {
        case 1:
            console.log("first column");
        break;
        case 2: 
            console.log("second column");
        break;
        case 3:
            console.log("third column");
        break;
        case 4: 
            console.log("fourth column");
        break;
        default:

        break;
    }
  }
});

目前，似乎没有任何记录，所以我假设这是我设置函数的方式。如果有人对我做错了什么有任何想法，我将非常感谢您的意见。

谢谢

Answer 1

您甚至不需要为此使用 jQuery，这是我所做的示例。

var columns = document.querySelectorAll('.col[data-column]');

for (var i = 0, s = columns.length; i < s; i++) {
  var col = columns[i];
  col.addEventListener("click", function() {
    for (var j = 0, z = columns.length; j < z; j++) {
      var temp = columns[j];
      temp.className = "col";
    }
    console.clear();
    this.className += " active";
    x = parseInt(this.getAttribute("data-column"))
    console.log(["first", "second", "third", "fourth"][x - 1] + " column")
  });
}

div.col {
  height: 20px;
  width: 20px;
  background: red;
  padding: 15px;
  margin: 15px;
}

div.col.active {
  background: yellow;
}

<div class="col active" data-column="1"></div>
<div class="col" data-column="2"></div>
<div class="col" data-column="3"></div>
<div class="col" data-column="4"></div>