將CSS設置應用於所有可點擊的元素

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');

小提琴

Answer 2

添加另一個名為isclickable類，這樣您就可以

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

然后，您可以使用.isclickable { cursor: pointer; } .isclickable { cursor: pointer; }在你的CSS

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

順便說一句：似乎非常“低效”地使用了class屬性，而類名並不是非常“有用”。