我有四个附加的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;
}
}
});
目前,似乎没有任何记录,所以我假设这是我设置我的功能的方式。如果有人对我做错了什么有任何想法,我会非常感谢你的意见。
谢谢
答案 0 :(得分: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")
});
}
&#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;