how could I use instead of passing an id, passing a Class on JQUERY?

1

I have this code here: HTML: <button class="btn btn-danger btn-circle delete" type="button"><i class="fa fa-remove"></i></b</td>

$('#submit1, #submit2').click(function () {
   if (this.id == 'submit1') {
      alert('Submit 1 clicked');
   }
   else if (this.id == 'submit2') {
      alert('Submit 2 clicked');
   }
});

I'd like to pass a class instead of an id , how do I? Should I use this.class instead of this.id ? and pass:

$('.submit1, .submit2').click(function () {
       if (this.class == 'submit1') {
          alert('Submit 1 clicked');
       }
});
    
asked by anonymous 11.01.2018 / 14:28

3 answers

1

If I understand the question correctly you look for something like this.

$('.btnSubmit').click(function () {      
    var button = $(this);
    //console.log("Você clicou em: " + $(this).attr('id'));
    if($(button).hasClass('sim'))
    {
      swal({
        title: 'Obrigado por escolher SIM!',
        html: '<strong>Informe seu e-mail:</strong>',
        input: 'text',
        preConfirm: (value) => {
          if (!value) {
            swal.showValidationError('Não pode ser vazio!')
          }
        }
      }).then((result) => {
        console.log(result)
      });
    }
    else
    {
      swal({
        title: 'Você escolheu não!',
        html: '<strong>Obrigado mesmo assim</strong>'        
      }); 
    }
});
@import "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.3.5/sweetalert2.min.css";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.3.5/sweetalert2.min.js"></script>
<button id="Submit1" class="btnSubmit sim">Sim</button>
<button id="Submit2" class="btnSubmit">Não</button>
    
11.01.2018 / 14:43
1

The code you have for click events is a bit strange and should be:

$('#submit1').click(function () {
   alert('Submit 1 clicked');
});

$('#submit2').click(function () {
   alert('Submit 2 clicked');
});

If you need to get to the element through the class, the only thing you need to change is the selector, going from # to .

$('.submit1').click(function () {
   alert('Submit 1 clicked');
});

$('.submit2').click(function () {
   alert('Submit 2 clicked');
});

This will imply that you have the class assigned in the correct element in the html.

Edit:

If you wanted to keep the style you had (which I did not advise) you could do so by relying on hasClass . :

$('.submit1, .submit2').click(function () {
     if ($(this).hasClass('submit1')) {
        alert('Submit 1 clicked');
     }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="submit" class="submit1" value="Submit 1">
<input type="submit" class="submit2" value="Submit 2">
    
11.01.2018 / 14:43
0

You can use this butter:

$('.submit1, .submit2').click(function () {
    if ($(this).attr('class').indexOf('submit1') >= 0) {
        alert('Submit 1 clicked');
    }
    else if ($(this).attr('class').indexOf('submit2') >= 0) {
        alert('Submit 2 clicked');
    }
}
    
11.01.2018 / 14:37