Question 11271 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

When a user clicks on either button I'd like for the name of the location to fadeIn but I'm not able to get it to work with this conditional statement – Jquery

When a user clicks on either button I’d like for the name of the location to fadeIn but I’m not able to get it to work with this conditional statement. I have a "Next" and a "Previous" button.
I was thinking by referencing the current element using e.target I could fadeIn() the extra information in my elements relevant to to each specific picture when the user clicks over to that picture

HTML

 <div class="divs">
       <div id="motion1"><img class="motion" src="./c1.jpg"><span class="info">Copacabana</span></div>
        <div><img id="motion2" class ="motion" src="./c2.jpg"><span class="info">Ipanema</span></div>
       <div><img id="motion3" class="motion" src="./c3.jpg"><span class="info">Florianópolis</span></div>
        <div><img id ="motion4" class="motion" src="./c4.jpg"><span class="info">Jericoacoara</span></div>
        <div><img id="motion5" class="motion" src="./c5.jpg"><span class="info">Praia da Trindade</span></div>
       <div><img id="motion6" class="motion" src="./c6.jpg"><span class="info">Porto de Galinhas</span></div>

      
    </div>


$(function() {

    $(".divs div:not('#motion1')").hide();
    let $span = $("span");
    $span.hide();

THIS IT THE CONDITIONAL STATEMENT ATTACHED THE CLICK EVENT IN QUESTION

$("#button2").on("click", function(e) {
    let target = e.target;
    if ($(this) == target) {
        $span.fadeIn();
    }
})
Tags:

2

Answers


  1. 0

    As I understand from your explanation. You want to show the related info inside the span which belongs to the picture that is clicked.

    Here is an example code produced from your code to showcase this. Check it out if this is what you want.

    <html>
  <head>
  <meta charset = "UTF-8">
   <title>----</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
   <script>
    $(document).ready(function(){
      $(".divs div:not('#motion1')").hide();
       let $span = $(".info");
      $span.hide();
      $(".motion").on("click", function(e) 
          {
             
             //console.log($(this).parent())
             $(".info").hide();
             $(this).parent().children("span").fadeIn()
        })
    });
    </script>
    
  </head>

  <body>
  <div class="divs">
      <div id="motion1"><img class="motion" src="./c1.jpg"><span     class="info">Copacabana</span></div>
      <div><img id="motion2" class ="motion" src="./c2.jpg"><span class="info">Ipanema</span></div>
      <div><img id="motion3" class="motion" src="./c3.jpg"><span class="info">Florianópolis</span></div>
      <div><img id ="motion4" class="motion" src="./c4.jpg"><span class="info">Jericoacoara</span></div>
      <div><img id="motion5" class="motion" src="./c5.jpg"><span class="info">Praia da Trindade</span></div>
      <div><img id="motion6" class="motion" src="./c6.jpg"><span class="info">Porto de Galinhas</span></div>
  
    </div>

  </body>
</html>
    Login or Signup to reply.
  2. 0

    I think this is what you want if I understand your question correctly.

    1. I will move .motion to both img‘s & span.info‘s parent element so it is easily to choose img and their .info by this.

    2. show function will only show 1 picture depend on i.

    3. $('.motion').on('click' ... will show & hide .info when user click img.

    4. $('button').on('click' ... will switch img and .info.

    function show(i) {
  $(`.motion:nth-of-type(${i})`).show()
  $(`.motion:not(:nth-of-type(${i}))`).hide()
}

let img_num = 1
let motion_len = $('.motion').length
$(() => {
  $('.info').hide()
  show(img_num)
  $('.motion').on('click', function() {
    $('.info', this).fadeToggle()
  })
  $('button').on('click', function() {
    $('.info').hide()
    let btn = $(this).attr('class')
    if (btn === 'next') {
      img_num += 1
    } else if (btn === 'previous') {
      img_num -= 1
    }
    img_num = img_num < 1 ? 6 : img_num > 6 ? 1 : img_num
    show(img_num)
  })

})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="motion"><img src="./c1.jpg"><span class="info">Copacabana</span></div>
  <div class="motion"><img src="./c2.jpg"><span class="info">Ipanema</span></div>
  <div class="motion"><img src="./c3.jpg"><span class="info">Florianópolis</span></div>
  <div class="motion"><img src="./c4.jpg"><span class="info">Jericoacoara</span></div>
  <div class="motion"><img src="./c5.jpg"><span class="info">Praia da Trindade</span></div>
  <div class="motion"><img src="./c6.jpg"><span class="info">Porto de Galinhas</span></div>
  <button class="previous">Previous</button>
  <button class="next">Next</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search