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

Question

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 one class in place of a id, how do I? Should I use a this.class in place of this.id? and pass :

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

Answer 1

If I understand correctly the question you seek 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>
<script src="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>

Answer 2

The code you have for click events is a little 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 # for .

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

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

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

Edit:

If you wanted to keep the style you had (which I do not advice) you could do it based 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>
<input type="submit" class="submit1" value="Submit 1">
<input type="submit" class="submit2" value="Submit 2">

Answer 3

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');
    }
}