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都是基于之前/不相关的单击事件而附加的），这样无论数据列的类是什么“活动”都使用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，这是我所做的一个例子。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: