Блог

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

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

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

С

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

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

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

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

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

[РЕДАКТИРОВАТЬ] Вот пример:http://jsfiddle.net/SShK6 /

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