更改后附加的數據屬性偵聽器

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>