Question

我想将cursor: pointer;应用于任何绑定了jQuery click()函数的元素。

如何在不转到CSS文件中的每个元素并手动添加cursor: pointer;的情况下执行此操作？（我有很多可点击的项目）

<span class = "clickable1">something</span>
<span class = "clickable2">something</span>
<span class = "clickable3">something</span>

$(".clickable1").click(function(){
  //do something
});

$(".clickable2").click(function(){
  //do something
});

$(".clickable3").click(function(){
  //do something
});

Answer 1

你实际上可以做到这一点通过检查内部$._data，您可以获取任何元素的绑定事件，那么只需要检查click是否是这些事件之一并附加样式等。

$('*').filter(function() {
    var d = $._data( this, "events" );
    return d && 'click' in d;
}).css('cursor', 'pointer');

FIDDLE

Answer 2

添加另一个名为isclickable的类，以便您拥有

<span class = "isclickable clickable1">something</span>
<span class = "isclickable clickable2">something</span>
<span class = "isclickable clickable3">something</span>

然后你可以在你的css中拥有.isclickable { cursor: pointer; }

Answer 3

解决方案1：为每个可点击元素提供与

相同的类

<span class = "clickable clickable1">something</span>
<span class = "clickable clickable2">something</span>
<span class = "clickable clickable3">something</span>

解决方案2：展开jQuery选择器$(".clickable1, .clickable2, .clickable3")

Answer 4

为什么不为所有人添加一个公共类？

<span class = "clickable clickable1">something</span>
<span class = "clickable clickable2">something</span>
<span class = "clickable clickable3">something</span>

然后，用css：

.clickable {
  cursor: pointer;
}

如果您不想手动更改已有的HTML（或者如果不能），则可以在绑定事件处理程序时添加该类：

function addClickBehavior($el, callback) {
  return $el.addClass("clickable").on("click", callback);
}

addClickBehavior($(".clickable1"), function(){
  //do something
});

addClickBehavior($(".clickable2"), function(){
  //do something
});

addClickBehavior($(".clickable3"), function(){
  //do something
});

Answer 5

只需使用选择器，选择类名称以“clickable”开头的所有元素：

$("*[class^='clickable']").css('cursor', 'pointer').click(function(){
  //do something
});

BTW：看起来像是一个非常“低效”的类属性使用，类名不是很“有用”。

将css设置应用于所有可点击元素

5 个答案: