Question

我正在尝试向元素添加类，因此，如果单击以相同名称开头的某个类，我希望在具有以相同名称开头的类的所有元素上运行它，不仅是类，还包括ID。

这是我现在遇到的问题，我无法使其工作：

$(".repair-" + (differentclass)").click(function(){
    $("#content").fadeOut("slow");
});

单击功能不需要有效的代码，我只需要知道如何实现此功能，因此可以将其用于其他语句。还是不同的方法？

Answer 1

您可以这样做：

$('*[class^="repair"]').click(function(){
    $("#content").fadeOut("slow");
});

$是jQuery对象。带有（）的所有内容都是传递给jQuery对象的参数。您必须传递一个字符串，因此参数以“或”开头。 *此选择器仅表示所有元素。然后在方括号中，将class属性“查找”。 ^的意思是“开头为”，然后为您要查找的内容传递另一个字符串值。

这是普通的JS版本

var allTargets = document.querySelectorAll("[class^=repair]"); // QSA return a node list, you have to iterate through it to change things or add listeners
for (var i = 0; i < allTargets.length; i++) { // classic for loop will do
 allTargets[i].style.color= "blue";
}

如您所见，具有相似类名的其他div保持不受影响。检查一下代码笔，笔上只有普通的，更可取的香草JS解决方案。

https://codepen.io/damPop/pen/rQPpGO?editors=1010

您还可以在其上添加fadeIn和out功能。我在另一支笔上有那个。

Answer 2

在这种情况下，您想通过属性匹配的CSS选择器使用事件委托。

假设您已经拥有其中包含以下repair-*元素的容器的句柄：

$container.on('click', '[class^="repair-"]', function(e) {
  // your callback here
});

jQuery函数可在具有相同名称或名称的相同类或ID的所有元素上运行

2 个答案: