jQuery slide切换到另一个div

Question

I have jQuery code:

  $(function() { $('li').on('click', function(e) { e.stopPropagation(); e.preventDefault(); alert($("a",this).data('number')); $(this).parent().find('#screen1').slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-slider"> <div class="col-md-8 text-center"> <img src="img/screen1.jpg" id="screen1"> </div> <div class="col-md-4"> <div class="box"> <p>xyz</p> </div> <div class="features-content"><ul class="fa-ul features-list"> <li><a href="#" id="list-1" data-number="1">1</a></li> <li><a href="#" id="list-2" data-number="2">2</a></li> <li><a href="#" id="list-3" data-number="3">3</a></li> <li><a href="#" id="list-4" data-number="4">4</a></li> <li><a href="#" id="list-5" data-number="5">5</a></li> <li><a href="#" id="list-6" data-number="6">6</a></li> </ul> </div> </div> </div> 

I'd like to use slideToggle to img with id screen1. I've been thinking for a some while how to jump from this div to another. Is it possible? If I should do one, main div with img and ul list?

Answer 1

Hi i assume you want to show different images based on the number chosen by the user. I created a plunk for you to see how that could be done https://plnkr.co/edit/JeAiitqyhg2wlgejZB1N?p=preview .

 $(function() {
  $('li').on('click', function(e)
   {var number=$("a",this).data('number');
       $('#screen'+number).slideDown();
       for(var i=0; i< $("#imageContainer > *").length;i++)
       {
         if(i != number)
         $('#screen'+i).slideUp();
       }
   });
 });

Answer 2

Don't need preventDefault for li I don't think but are you looking for something like this?

$(function() {
      $('li').on('click', function(e) {
           var screenNum = $(this).find('a').data('number'));
           $(this).parent().find('#screen' + screenNum).slideToggle();
       });
});