1

Hola quería saber como puedo pasar esta función de jquery a javascript pero en vez de tener la función mousedown sea de mouse click

$(".myButton").on("mousedown mouseup", function(e){
    $(this).toggleClass("active", e.type === "mousedown");
});
.myButton {
    cursor:pointer;
    background-color: #fff;
    width:100px;
    height:100px;
    boborder-width: 1px;
    border-style: solid;
}
.myButton.active {
    background-color: #f00;
    -ms-transition-duration: 0.2s;
    -ms-transform: scale(0.95);
    -webkit-transition-duration: 0.2s;
    -webkit-transform: scale(0.95);
    -moz-transition-duration: 0.2s;
    -moz-transform: scale(0.95);
    -o-transition-duration: 0.2s;
    -o-transform: scale(0.95);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
</div>

3 respuestas 3

2

El equivalente sin jQuery sería algo así:

let buttons= document.querySelectorAll('.myButton');
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    btn.classList.toggle('active');
  });
});
  
.myButton {
    cursor:pointer;
    background-color: #fff;
    width:100px;
    height:100px;
    boborder-width: 1px;
    border-style: solid;
}
.myButton.active {
    background-color: #f00;
    -ms-transition-duration: 0.2s;
    -ms-transform: scale(0.95);
    -webkit-transition-duration: 0.2s;
    -webkit-transform: scale(0.95);
    -moz-transition-duration: 0.2s;
    -moz-transform: scale(0.95);
    -o-transition-duration: 0.2s;
    -o-transform: scale(0.95);
}
<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
</div>

1
  • Excelente Pablo eso queria, muchas gracias Commented el 28 mar. 2019 a las 17:31
1

Podrías usar queryselector para obtener la referencia del botón

var myButton = document.querySelector(".myButton");

Y agregar un listener para el evento click

myButton.addEventListener("click", function(){
  myButton.classList.toggle("active");
}); 
3
  • Es correcto, asumi que solo habría un botón Commented el 28 mar. 2019 a las 17:24
  • Sigues usando jQuery, aparte eso no compila Commented el 28 mar. 2019 a las 17:24
  • Gracias Joel y Pablo, creo que me exprese mal yo con la pregunta, lo que necesito seria que funcione como un boton con un titulo y una flecha al costado y que esa flecha se muestre para abajo y clickear haga para arriba, se comprende? Commented el 28 mar. 2019 a las 17:30
0

//buscamos el boton
var myButton = document.querySelector(".myButton");
//Si el boton existe y no está nulo
if(myButton != undefined && myButton != null)
{
  //Aquí se agrega el evento del click
  myButton.onclick = function (){
    //guardarmos el contenido del class en la variable clase
    var clase = this.className;
    //Buscamos si el boton NO tiene la clase active
    if(clase.search("active") == -1)
    {
      //Como NO la tiene, entonces agregamos la clase
      this.className += " active ";
    }
    else
    {
      //Si tiene la clase, entonces remplazamos la case con un vacio
      this.className = clase.replace("active", " ");
    }
    
  }
}
.myButton {
    cursor:pointer;
    background-color: #fff;
    width:100px;
    height:100px;
    border-width: 1px;
    border-style: solid;
}
.myButton.active {
    background-color: #f00;
    -ms-transition-duration: 0.2s;
    -ms-transform: scale(0.95);
    -webkit-transition-duration: 0.2s;
    -webkit-transform: scale(0.95);
    -moz-transition-duration: 0.2s;
    -moz-transform: scale(0.95);
    -o-transition-duration: 0.2s;
    -o-transform: scale(0.95);
}
<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
</div>

1
  • Gracias alfonso, creo que me exprese mal yo con la pregunta, lo que necesito seria que funcione como un boton con un titulo y una flecha al costado y que esa flecha se muestre para abajo y clickear haga para arriba, se comprende? Commented el 28 mar. 2019 a las 17:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.