tại sao mã này không nhắm mục tiêu chọn đúng

Question

Chức năng này được cho là thay đổi màu nền của đối tượng được nhấp

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

tôi gọi nó như thế này

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

và nó thay đổi nền của div này

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

Vấn đề là tôi muốn làm điều gì khác trước khi chạy colorMe. Vì vậy, tôi không thể sử dụng chỉ $('.colorme').click(colorMe);. Những gì tôi đang cố gắng làm là một cái gì đó như thế này

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

nhưng nó không ảnh hưởng đến div. Tôi nghĩ rằng nó bị mất dấu vết của div để ảnh hưởng. Tôi có cần phải vượt qua nó và làm thế nào?

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.. 
}); 

Để gọi một chức năng trên một đối tượng jQuery như bạn đã làm ở đây

$(this).colorMe() 

bạn sẽ phải xây dựng một plugin (tôi sửa nó để thêm một lớp)

// css 
.red { 
    background: red; 
} 

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

Sau đó, bạn sẽ có thể làm

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

Answer 2

Bạn nên sử dụng phương pháp .addClass().

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

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

Và trong file css của bạn, bạn có một lớp gọi là 'my-đỏ-lớp' (sử dụng một tên tốt hơn!)

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

Và bạn cũng có thể dễ dàng loại bỏ các css:

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

Answer 3

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

sử dụng cuộc gọi()

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