Блог

Я пытаюсь использовать элементы списка для переключения между соответствующими панелями, я также хочу сделать это с помощью переменных, просто чтобы я мог лучше ориентироваться в их использовании. Вот мой html и код ниже. Я пытаюсь извлечь i из идентификатора «значок», на который нажат, и использовать это i, чтобы открыть соответствующий идентификатор «панели», а затем прикрепить i. Любая помощь будет оценена! Спасибо!

HTML

 <div id="icon0" class="icon">
                    <a href=""><img src="Images/film_icon.png"/></a>
                    </div>
<div id="icon1" class="icon">
                    <a href=""><img src="Images/film_icon.png"/></a>
                    </div>
<div id="icon2" class="icon">
                    <a href=""><img src="Images/film_icon.png"/></a>
                    </div>
<div id="icon3" class="icon">
                    <a href=""><img src="Images/film_icon.png"/></a>
                    </div>
  

html-панели:

 <div id="panel0" class="panel">0000</div>
                    <div id="panel1" class="panel">1111</div>
                    <div id="panel2" class="panel">2222</div>
                    <div id="panel3" class="panel">3333</div>
  

Jquery

 for(var i=0; i<4; i  ){
        $('#icon' i).click( function() {  
        $('#panel' i).fadeOut(400);
        return false;
  

 <script type="text/javascript">
$(document).ready(function(){
   var iconPrefix = "icon";
   var panelPrefix = "panel";
   $("[id^='" iconPrefix  "']").each(
    function(index, Element){
      $("#" iconPrefix  index).click(function(event){
        $("#" panelPrefix  index).fadeToggle(400);
      });
    }
   );
});
</script>
  

Хорошо, сначала соберите все свои значки в объекте, затем при каждом нажатии на один получите индекс и вызовите исчезновение на соответствующей панели:

 var $icons  = $(".icons");
$icons.each(function() {
  $(this).click(function(evt) {
    var thisIndex = parseInt($(this).index());
    $("#panel" thisIndex).fadeToggle(4000);
  });
});