jQuery addClass onClick

Question

Cài đặt rất dễ dàng; Tôi muốn có thể thêm một lớp vào (trong trường hợp này) một nút khi sự kiện onClick được kích hoạt. Vấn đề của tôi là tôi đã không tìm thấy một cách để vượt qua các nút chính nó như là tham số cho chức năng. Tôi muốn làm điều gì đó như:

<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/> 

Và sau đó một hàm JavaScript một cái gì đó như thế này:

function addClassByClick(button){ 
    button.addClass("active") 
} 

Tôi biết tôi đã có rất nhiều sai sót ở đây, nhưng đó là lý do tại sao tôi đăng. Tôi đã thử các kịch bản khác nhau với jQuery và không có jQuery nhưng tôi luôn kết thúc với một giải pháp bị hỏng (các lần nhấp đột ngột dừng lại, lớp không được thêm vào v.v.) vì vậy tôi quyết định hỏi chuyên gia.

Bất kỳ đề xuất nào về những gì tôi có thể thử? Cảm ơn bạn đã đọc chỉnh sửa và tất cả trợ giúp!

Answer 1

Nó cần phải là một yếu tố jQuery để sử dụng .addClass(), vì vậy nó cần phải được bọc trong $() như thế này:

function addClassByClick(button){ 
    $(button).addClass("active") 
} 

---

Một giải pháp tổng thể tốt hơn sẽ là kịch bản không phô trương, ví dụ:

<asp:Button ID="Button" runat="server" class="clickable"/> 

Sau đó, trong jquery:

$(function() {      //run when the DOM is ready 
    $(".clickable").click(function() { //use a class, since your ID gets mangled 
    $(this).addClass("active");  //add the class to the clicked element 
    }); 
}); 

Answer 2

Sử dụng jQuery:

$('#Button').click(function(){ 
    $(this).addClass("active"); 
}); 

Bằng cách này, bạn không cần phải làm ô nhiễm đánh dấu HTML của bạn với onclick xử lý.

Answer 3

$('#button').click(function(){ 
    $(this).addClass('active'); 
}); 

Answer 4

$(document).ready(function() { 
    $('#Button').click(function() { 
     $(this).addClass('active'); 
    }); 
}); 

nên làm các trick. trừ khi bạn đang tải nút bằng ajax. Trong trường hợp đó bạn có thể làm:

$('#Button').live('click', function() {... 

Cũng nhớ không sử dụng cùng một id nhiều hơn một lần trong mã html của bạn.

Answer 5

Cố gắng làm cho css của bạn cụ thể hơn để kiểu (màu xanh lá cây) mới cụ thể hơn kiểu trước đó, vì vậy nó làm việc cho tôi!

Ví dụ, bạn có thể sử dụng trong css:

button:active {/*your style here*/} 

Thay vì (có lẽ không làm việc):

.active {/*style*/} (.active is not a pseudo-class) 

Hy vọng nó sẽ giúp!