Question

我正在尝试使用列表元素在相应的面板之间切换，我也想使用变量来做这件事，这样我就可以更好地使用它们。这是我的html和代码如下。我想从点击的“icon”id中提取i，并使用该i打开相应的“panel”id，随后附加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;

Answer 1

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

Answer 2

确定收集对象中的所有图标，首先，每当点击一个图标时获取索引并触发相应面板上的淡入淡出：

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

使用从选择器中提取的变量

2 个答案: