La pregunta es: Por que ESTE ejemplo anda asi como esta, pero si el JS lo cambio por el siguente, deja de andar:
var clicked = 0;
$(".ripple").click(function() {
var clicked = 1;
document.getElementById("di").addClass("expanded");
});
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadLa pregunta es: Por que ESTE ejemplo anda asi como esta, pero si el JS lo cambio por el siguente, deja de andar:
var clicked = 0;
$(".ripple").click(function() {
var clicked = 1;
document.getElementById("di").addClass("expanded");
});
El método addClass() pertenece a JQuery
, con lo que necesitas seleccionar el elemento con la función JQuery
para que el método te funcione;
var clicked = 0;
$(".ripple").click(function() {
var clicked = 1;
$('#di').addClass("expanded");
});
Si lo que quieres es utilizar JavaScript plano, tienes el elemento className
o como te han dicho en la otra respuesta, setAttribute()
. Una forma sería;
var clicked = 0;
$(".ripple").click(function() {
var clicked = 1;
document.getElementById("di").className += " expanded";
});
Si quieres ver más puedes consultar className
No te funciona por que estas juntando JavaScript nativo con jQuery, si lo quieres con JavaScript nativo debe ser así:
var clicked = 0;
$(".ripple").click(function() {
var clicked = 1;
document.getElementById("di").setAttribute("class", "expanded");
});
#di {
position: fixed;
background: red;
width: 30px;
height: 30px;
border-radius: 100%;
overflow: hidden;
transition: transform 700ms ease-out;
left: 50%;
top: 50%;
}
#di.expanded {
transform: scale(20);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="di" class="ripple">
asds
</div>
Esa es la solución a tu inquietud, pero reitero no debes mezclar jQuery con JavaScript nativo de esa forma.