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

Answer 2

您应该使用.addClass()方法。

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

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

在你的css文件中你有一个名为'my-red-class'的类（使用更好的名字！）

.my-red-class { background-color: red; }

你也可以轻松删除css：

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

Answer 3

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

使用call（）

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

为什么此代码不针对正确的选择器

3 个答案: