Использование jQuery скрыть шоу несколько раз

Question

Я использую приведенный ниже код для замены значка минимизации на значок раскрытия при нажатии.

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

Единственная проблема в том, что я могу использовать его только один раз (первый экземпляр, второй значок не меняется и т. Д.). В общем, я должен был бы использовать это 5 раз, поскольку у меня есть 5 таблиц на одной странице. Есть идеи как это сделать? Я довольно новичок в веб-разработке, не говоря уже о 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>

* заменит идентификаторы вместо классов. мой плохой на этом.

Answer 1

С

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

Вы скрываете все элементы на странице с помощью class = 'expandicon'

и с

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

показаны все элементы с классом = '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();        
    });
});

Вы можете проверить это здесь

Answer 2

Вы можете использовать css, чтобы установить изображение в качестве фона.Затем создайте класс сжатия и расширения и используйте toggleClass() (http://api.jquery.com/toggleClass/) для переключения между ними при нажатии.

Answer 3

Мы не сможем вам сильно помочь без HTML-кода, но вот несколько советов:

• Вы можете использовать метод .toggle(), чтобы динамически скрывать / показывать элемент в зависимости от его предыдущего состояния
• если вам нужно применить одно и то же событие к нескольким элементам, лучше использовать классы вместо идентификаторы (помните, что идентификаторы уникальны )

[EDIT] Вот пример: http://jsfiddle.net/SShK6/

[РЕДАКТИРОВАТЬ 2] Вот пример с вашим HTML, как: http://jsfiddle.net/ux8Nw/