jQuery slideToggle zu einem anderen div

Question

Ich habe 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>

Ich möchte slideToggle verwenden, um mit id screen1 img. Ich habe eine Weile darüber nachgedacht, wie ich von diesem Div zum nächsten springen kann. Ist es möglich? Wenn ich einen machen sollte, main div mit img und ul list?

Answer 1

Hallo ich nehme an, dass Sie verschiedene Bilder basierend auf der vom Benutzer gewählten Nummer anzeigen möchten. Ich habe ein Plunk für Sie erstellt, um zu sehen, wie das gemacht werden könnte 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

Brauchen Sie nicht preventDefault für li Ich glaube nicht, aber suchen Sie etwas wie das?

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