validation in IF Jquery

Asked

Viewed 194 times

2

good afternoon,

I have several screens that is hidden(fade), when clicked on a button it appears.

<script>
    $(document).ready(function() {
        $("#animate").click(function() {
            $('#content').animate({"left": "100%"}, 1500);
            $('#content2').animate({"right": "100%"},1500);
        });
    });
</script>

I have these ID: Animate, animateServico, animatePortifolio.

I wanted to know how to do a validation, so that when you click on a button that has one of the ID it makes the commands.

Example: when clicked on Animate, I want the screen to walk X px, if clicked on animateServico the screen walk X px.

jquery

2 answers

1


From what I understand, you want to add the Eventlistener simultaneously in the elements that have the Ids: animate, animateServico, animatePortifolio.

You can do this by simply adding the other Ids with a comma to the selector, thus:

$("#animate, #animateServico, #animatePortifolio").click(function() {
    //ação que você deseja
});

[Edited]

Given what you said in the comments, already contradicting my own statement, you can use the above approach, manipulating with own if, which screen you want to open.

There are two ways to open a specific screen, according to the element that was clicked:

Form 1

You can get the id of the clicked element, and so, you elaborate a block if, thus:

$("#animate, #animateServico, #animatePortifolio").click(function(event) { 
    //o "event" se faz necessário para obter-se o elemento clicado
    let targetId = event.target.id;
    if (targetId == "animate") {
        //ação 1
    } else if (targetId == "animateServico") {
        //ação 2
    } else if (targetId == "animatePortifolio") {
        //ação 3
    }
});

Form 2

You can define a data attribute, to soon after get its value, and according to it, open the desired screen:

<script> 
    $(document).ready(function() { 
        $("#animate, #animateServico, #animatePortifolio").click(function(event) { 
            $('#content').animate({"left": "100%"}, 1500); 
            $('#' + $(event.target).attr("data-tela")).animate({"right": "100%"},1500); 
         }); 
     }); 
</script>

I hope I’ve helped!

  • more this way I would not have the control, because all screens would do the same thing at the same time, to better mean, and the following, I have the main screen with four options, depending on the option I choose the main one disappears and opens the screen that was chosen.

  • So in that case, you would have to use the selector in a specific way for each one, that is, you would have to use the selector three times to open the specific windows of each button.

  • I found that weaves a way to simplify this with the if, thank you very much for the help.

  • I edited the answer

1

As Gustavo put it in the answer, use the .target to know which button triggered the event:

$("#animate, #animateServico, #animatePortifolio").click(function(e){
   
   var id = e.target.id; // pega o id do botão
   
   if(id == "animate"){
      
      console.log("botão animate");
      
   }else if(id == "animateServico"){

      console.log("botão animateServiço");

   }else{

      console.log("botão animatePortifolio");

   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="animate">animate</button>
<button id="animateServico">animateServico</button>
<button id="animatePortifolio">animatePortifolio</button>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.