Функция click из-за javascript

Привет он хотел знать, как я могу перемещать эту функцию jquery в javascript, но вместо того, чтобы иметь функцию mousedown будьте мыши 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>
1
задан 28.03.2019, 09:11
3 ответа

Эквивалент без jQuery ser¦ - в небольшое количество 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>
2
ответ дан 19.11.2019, 21:21
  • 1
    Превосходный Пабло это хотел, большое спасибо – Mariano Andres Franco 28.03.2019, 09:31

Podr¦-схвати использовать queryselector, чтобы получать ссылку bot¦n

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

И добавлять listener для события click

myButton.addEventListener("click", function(){
  myButton.classList.toggle("active");
}); 
1
ответ дан 19.11.2019, 21:21
  • 1
    Он правилен, я принял, что только habrí в botó n – Joel Ibaceta 28.03.2019, 09:24
  • 2
    Ты продолжаешь использовать jQuery, отдельно он это не составляет – Pablo Lozano 28.03.2019, 09:24
  • 3
    Спасибо Джоэл и Пабло, я думаю, что выражаю плохо я с вопросом, в чем я нуждаюсь, состояло бы в том, чтобы оно функционировало как кнопка с титулом и стрелой в бок, и в том, чтобы эта стрела появилась для внизу и clickear он сделал для наверху, он понимается? – Mariano Andres Franco 28.03.2019, 09:30

//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>
0
ответ дан 19.11.2019, 21:21
  • 1
    Спасибо alfonso, я думаю, что выражаю плохо я с вопросом, в чем я нуждаюсь, состояло бы в том, чтобы оно функционировало как кнопка с титулом и стрелой в бок, и в том, чтобы эта стрела появилась для внизу и clickear он сделал для наверху, он понимается? – Mariano Andres Franco 28.03.2019, 09:25