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

从数组中创建一个multiple selector选择器字符串...

$(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检查Classes数组中是否存在该类（阅读更多内容：https://api.jquery.com/jQuery.inArray/）

可能有必要将class attr从元素转换为classes数组，逐个测试以支持元素上的多类。

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

请尝试以下代码。它适合我。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

有一些方法可以做到：

使用多个选择器，例如：$( "div, span, p.myClass" ).css( "border", "3px solid red" )（Refferences）
使用^例如：$("[title^='Tom']").hide()

JQuery选择器技术：

取自w3schools

*：选择所有元素。示例：$("*")
#id：在id上选择元素库。示例：$("#lastname")
.class：在class上选择一些元素库。示例：$(".intro")
.class,.class,#id：选择多个元素。示例：$(".intro,.demo,div,#emp01")
tagName：在html tag-name上选择元素。示例：$("div")
:first：选择第一个元素。示例：$("p:first")
:last：选择最后一个元素。示例：$("p:last")
:even：选择偶数元素。示例：$("tr:even")
:odd：选择奇数元素。示例：$("tr:odd")
等

单击数组中列出的任何类时执行某些操作

4 个答案: