使用jQuery隐藏显示多次

Question

我使用下面的代码在单击时将最小化图标替换为展开图标。

$(document).ready(function(){
  $("#expand").click(function(){
    $(".expandicon").hide();
    $(".shrinkicon").show();
  });
  $("#shrink").click(function(){
    $(".expandicon").show();
    $(".shrinkicon").hide();
  });
});

唯一的问题是我只能使用它一次（第一个实例，然后第二个图标不会改变，依此类推）。总而言之，我必须使用它 5 次，因为我在一个页面中有 5 个表。知道怎么做吗？我对 Web 开发相当陌生，更不用说 jQuery 了。任何帮助将不胜感激。提前致谢！

[编辑] 这是我的 HTML 代码：

<span class="expandicon" style="display:none;">
  <a class="flip">
    <img id="expand" src="img/expand1.png" />
  </a>
</span>
<span class="shrinkicon">
  <a class="flip">
    <img id="shrink" src="img/shrink1.png" />
  </a>
</span>

* 将用类替换 id。我对那个不好。

Answer 1

，

$(".expandicon").hide();

隐藏页面中带有 class='expandicon' 的所有元素

并

$(".shrinkicon").show();

显示带有 class='shrinkicon' 的所有元素。

查看选择器。

对于您的情况，请尝试以下操作：

HTML:

<span class="expandicon" style="display:none;"> expand 1 </span>
<span class="shrinkicon"> shrink 1 </span>
<br/>
<span class="expandicon" style="display:none;"> expand 2 </span>
<span class="shrinkicon"> shrink 2</span>

JS:

$(function(){
    $('span.expandicon').click(function(){
        $(this).toggle().next('span.shrinkicon').toggle();    
    });
    $('span.shrinkicon').click(function(){
        $(this).toggle().prev('span.expandicon').toggle();        
    });
});

You can test it 此处

Answer 2

您可以使用 css 将图像设置为背景。比创建一个类收缩和扩展并使用 toggleClass() ( http://api. jquery.com/toggleClass/ ）在单击时在它们之间切换。

Answer 3

如果没有 HTML 代码，我们无法为您提供太多帮助，但这里有一些提示：

• 您可以使用 .toggle() 方法根据元素之前的状态动态隐藏/显示元素
• 如果您需要将相同的事件应用于多个元素，您最好使用 classes 而不是 >ids（记住 ids 是独特）

[编辑]这是一个示例：http://jsfiddle.net/SShK6/< /a>

[编辑2] 这是一个 HTML 示例，如下所示： http://jsfiddle.net/ux8Nw/