更改后附加的数据属性侦听器

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>

我设置了一个on click函数，以便您单击的任何列（假设它不是当前活动的div）都会丢失活动的类，并将其添加到您单击的任何div中。

话虽如此，我正在尝试设置一个侦听器（请注意，所有这些div都是基于先前/不相关的click事件附加的），以便任何具有“活动”类的数据列都使用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>