javascript - 为什么这段代码没有针对正确的选择器

Question

这个函数应该改变被点击对象的背景颜色

function colorMe(){
   $(this).css('background-color', 'red');
}

我是这样调用它的

$('.colorme').click(colorMe);

它改变了这个div的背景

<div class="colorme">Color Me</div>

问题是我想在运行 colorMe 之前做些别的事情。所以我不能只使用 $('.colorme').click(colorMe);。我想做的是这样的

$('.colorme').click(function(){
  alert('something happens first, then colorMe is called');
  colorMe();         //I call colorMe here..
  $(this).colorMe(); //I also tried this, but it's not working
});

但它不会影响 div。我认为它失去了对 div 的影响。我需要通过它吗？如何通过？

Answer 1

function colorMe(elt){
   $(elt).css('background-color', 'red');
}

$('.colorme').click(function(){
  alert('something happens first, then colorMe is called');
  colorMe(this);         //I call colorMe here..
});

像这里一样在 jQuery 对象上调用函数

$(this).colorMe()

你必须构建一个插件(我编辑它以添加一个类)

// css
.red {
    background: red;
}

// js
(function($) {
    $.fn.extend({
        colorMe: function() {
            this.addClass("red");
        },
        unColorMe: function() {
            this.removeClass("red");
        }
    });
})(jQuery);

那么你就可以做

$(".a_class").colorMe();
$(".a_class").unColorMe();