2011-02-06 80 views
6

这个功能应该改变对象的背景色被点击为什么这个代码不针对正确的选择

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

我这样称呼它

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

,它改变了背景这个格

<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的轨道。我需要通过它,以及如何?

+0

你是否试图放这条线​​:$(this).css('background-color' ,'红'); 在点击功能中,而不是独立功能 – 2011-02-06 07:52:07

回答

5
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(); 
使用
+0

好的答案,罗宾,并解释插件。我还会第二次听到JK的意见,认为使用课堂比强调风格更好。 – Nimrod 2011-02-06 08:04:08

3

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

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

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

而且在你的CSS文件中有一个名为“我的红色类”类(使用一个更好的名字!)

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

而且你还可以轻松去除CSS:

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

您的范围是错误的:`click`回调将传递一个DOM元素,而不是一个jQuery对象; DOM元素没有`addClass()`方法。 – Phrogz 2011-02-06 14:29:29

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

()调用

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