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

Question

I want to apply cursor: pointer; to any element that has jQuery click() function bound to it.

How can I do this without going to each element in my CSS file and manually adding cursor: pointer; to it? (I have a lot of various clickable items)

<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

You actually can do this.
By checking the internal $._data you can get the bound events on any element, then it's just a matter of checking if click is one of those events and attaching the style etc.

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

FIDDLE

Answer 2

Add another class called isclickable so you would have

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

Then you can have .isclickable { cursor: pointer; } .isclickable { cursor: pointer; } in your css

Answer 3

Solution 1: give every clickable element the same class like

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

Solution 2: expand jQuery selector $(".clickable1, .clickable2, .clickable3")

Answer 4

Why not add a common class to all of them?

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

Then, with css:

.clickable {
  cursor: pointer;
}

If you'd rather not change the HTML you already have manually (or if you can't), you can add the class when binding the event handlers:

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

Simply use a selector that selects all elements whose class name starts with "clickable":

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

BTW: Seems like a very "inefficient" use of the class attribute and class names aren't very "useful".