当单击数组中列出的任何类时，请执行以下操作

Question

我要做的是:当单击数组中列出的任何类的元素时，应该将类(只有该类)传递给函数。

我知道以下内容是非常不正确的，但我希望它能说明我正在努力实现的目标：

var arr = ['.clickable-1', '.clickable-2', '.clickable-3', '.clickable-4', '.clickable-5'];

$(arr).click(function(){
    alert('this class got clicked: ' + $(this).prop('class'));
});

Answer 1

从数组中创建多选择器选择器字符串..。

$(arr.join(',')).on('click', function() {
    console.log('this class got clicked:', this.className);
})

注意，如果元素有多个类，则为

<button class="clickable-1 clickable-2 something-else and-another">
    Click me
</button>

它们都将显示在className属性中。

Answer 2

您必须将数组连接到一个字符串中，才能使jQuery选择器工作。

您还可能希望使用$.inArray来检查类是否存在于类数组中(请阅读更多信息：https://api.jquery.com/jQuery.inArray/)

可能需要将元素中的类attr转换为一个类数组来逐个测试以支持元素上的多个类。

var Classes = ['.clickable-1', '.clickable-2', '.clickable-3', '.clickable-4', '.clickable-5'],
    SelectorString = Classes.join(",");

$(SelectorString).on("click", function() {
    var $this = $(this),
        $thisClasses = $this.attr("class").split(" "),
        Index = -1;

  for (var i = 0; i < $thisClasses.length; i++) {
    Index = $.inArray("." + $thisClasses[i], Classes);
    if (Index >= 0) break;
  }
  alert(Index);
});

https://jsfiddle.net/x59w2oux/1/

Answer 3

试试下面的代码。对我来说很管用。

​

for (var i = 0; i < 15; i++) {
	$("#container").append("<div class='createDiv'>" + i + "</div>");
}

$(".createDiv").each(function(i){
  $(this).attr("data-index", i);
  $(this).addClass("dataindex"+i);
});

$(".createDiv[data-index='" + 4 + "']").addClass("selected");

$('.createDiv').on("click",function(){
    	   if ($(this).hasClass("dataindex3")){
         		alert("Hai");
         		multiply(2,2);
         }
         else{
            alert("welcome");
         }
});

var multiply = function(x,y){
		return x * y;
};

.createDiv {
  padding: 4px;
  font-family: arial;
  background-color: #800;
  color: white;
  font-weight: bold;
  
  width: 40px;
  margin-bottom: 2px;
}

.selected {
  background-color: #080;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  
</div>

​