jQuery addClass onClick

La configuración es fácil; Quiero poder agregar una clase a (en este caso) un botón cuando se activa el evento OnClick. Mi problema es que no he encontrado la forma de pasar el botón como el parámetro de la función. Me gustaría hacer algo como:jQuery addClass onClick

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

Y entonces una función de JavaScript algo como esto:

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

Yo sé que tengo una gran cantidad de errores aquí, pero eso es por lo que estoy destino. He probado diferentes escenarios con jQuery y sin jQuery pero siempre termino con una solución rota (los clics dejan de llegar repentinamente, la clase no se agrega, etc.), así que decidí preguntarle a los profesionales.

¿Alguna sugerencia de lo que puedo probar? Gracias por leer edit y toda la ayuda!

Fuente

2010-08-25 Phil

Como señalaron muchas personas, la ID procesada de su botón no será "Botón". Sin embargo, aún puede hacer referencia por ID en lugar de clase (los selectores de jquery tienen mejor rendimiento en ID que las clases), al hacer esto: $ ("# <% = Button.ClientID%>") – mikemanne

Tiene que ser un elemento de jQuery para usar .addClass(), por lo que debe ser envuelto en $() así:

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

Una solución general mejor sería guión discreta, por ejemplo:

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

Luego, en 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 
    }); 
});

Fuente

2010-08-25 14:25:33

en su primer ejemplo, ¿De verdad puedo usar "esto" para pasar el botón como argumento para la función? ¿No necesitaría hacer algo de casting o todo eso se maneja? – Phil

@Phil - Sí, puede pasar 'this' en el primer ejemplo, es un elemento DOM, eso es todo lo que necesita :) Sin embargo, le recomiendo que use una opción discreta como la segunda mitad de la respuesta, es mucho más fácil mantener. –

@Nick - Sin duda lo intentaré, pero todavía no me siento cómodo con la sintaxis de jQuery. Realmente debería leerlo. Como en tu ejemplo; si las clases del botón son: CssClass = "botón horizontal flotante", ¿cómo podría apuntar a eso? – Phil

Usando jQuery:

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

esta manera, usted no tiene que contaminan el marcado HTML con onclick manipuladores.

Fuente

2010-08-25 14:26:02

El problema con este enfoque es que el elemento ID no es ' t garantizado para ser 'Button', por lo general no lo es. –

Bueno, solo puedes trabajar con lo que te da la pregunta. Estoy seguro de que Phil es lo suficientemente inteligente como para buscar los documentos del selector jQuery y encontrar un buen selector apto para el trabajo. –

No estaría tan seguro;) – Phil

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

Fuente

2010-08-25 14:27:30 kevtrout

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

debe hacer el truco. a menos que estés cargando el botón con ajax. En cuyo caso, usted podría hacer:

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

Recuerde también no utilizar el mismo identificador más de una vez en su código html.

Fuente

2010-08-25 14:29:51 demux

Intente hacer que su CSS sea más específico para que el nuevo estilo (verde) sea más específico que el anterior, ¡así que funcionó para mí!

Por ejemplo, es posible utilizar en css:

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

En lugar de (probablemente no funciona):

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

espero que ayude!

Fuente

2013-05-27 08:53:47 viridis

Respuesta

Cuestiones relacionadas