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'的元素。

查看selectors。

对于您的情况，请尝试：

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();        
    });
});

您可以对其进行测试here

Answer 2

如果没有HTML代码，我们无法帮助您，但以下是一些提示：

您可以使用.toggle()方法动态隐藏/显示元素，具体取决于其先前的状态
如果您需要将同一事件应用于多个元素，则最好使用类而不是 ID （请记住，ids是唯一）

[编辑]以下是一个示例：http://jsfiddle.net/SShK6/

[编辑2]以下是您的HTML示例：http://jsfiddle.net/ux8Nw/

Answer 3

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

使用jQuery隐藏显示多次

3 个答案: