Javascript 为什么此代码没有针对正确的选择器

此函数用于更改被单击对象的背景颜色

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

我这样称呼它

$('.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 class="colorme">Color Me</div>

---

但这并没有影响到这个部门。我认为它失去了影响这个部门的线索。我需要传递它吗？如何传递？

您应该使用

.addClass（）

方法

function colorMe(element){
   element.addClass('my-red-class');
}

$('.colorme').click(function(){      
  colorMe(this);         
});

在css文件中有一个名为“我的红色类”（使用更好的名称！）

您还可以轻松删除css：

function unColorMe(element){
   element.removeClass('my-red-class');
}

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

$(this).colorMe()

你必须构建一个插件（我编辑它来添加一个类）

那你就能做到了

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

使用call（）

---

你有没有试着写这行：$（this.css（'background-color'，'red'）；在click函数中，不是独立的函数Good answer、Robin，而是解释插件。我还支持JK的观点，即使用类比内联样式更好。+1但是注意，

每个

的调用是不必要的，因为

$.fn.css

本身就包含一个。我更改了插件以添加类，删除了不必要的循环并添加了unColorMe。您的作用域是错误的：

单击

回调将传递一个DOM元素，而不是jQuery对象；DOM元素没有

addClass（）

方法。

$(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();

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

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