Prototype toggle - два экземпляра путаются

Question

У меня есть два экземпляра, которые используют toggle(). Таким образом, в коде есть такая ссылка:

<a href="#" onClick="$('div1').toggle(); return false;">Completely independent link</a> 

Вслед за более сложной областью шоу скрыть тумблер:

<a href="#" onClick="$('showLessInfo').toggle();$('showAllInfo').toggle(); $('showAllInfoLink').toggle(); return false;">Show All</a> 

И тогда реверс, что:

<a href="#" onClick="$('showLessInfo').toggle();$('showAllInfo').toggle(); $('showAllInfoLink').toggle(); return false;">Show Less</a> 

Проблемы I есть, когда я переключаю ссылку «Показать все» - это делает неприменимым «Полностью независимую ссылку». Иногда он даже открывает шоу/скрывает # div1?!?

Не уверен, что происходит, но два экземпляра, безусловно, запутались.

Answer 1

Я думаю, что происходит то, что происходит на вашем событии с щелчком, и он ударяет по другим элементам, но я не могу быть уверен, не видя больше вашей структуры HTML.

Это, как говорится, я предлагаю положить все в отдельные наблюдатели кликов, он удаляет javascript из HTML и упрощает обработку.

Например ваши 3 ссылки

<a href="#" onClick="$('div1').toggle(); return false;">Completely independent link</a> 
<a href="#" onClick="$('showLessInfo').toggle();$('showAllInfo').toggle(); $('showAllInfoLink').toggle(); return false;">Show All</a> 
<a href="#" onClick="$('showLessInfo').toggle();$('showAllInfo').toggle(); $('showAllInfoLink').toggle(); return false;">Show Less</a> 

изменится на

<a href="javascript:void(0);" id="link1">Completely independent link</a> 
<a href="javascript:void(0);" id="showall">Show All</a> 
<a href="javascript:void(0);" id="showless">Show Less</a> 

и добавьте это в вашей голове или JS файл или где-нибудь на странице

<script> 
    document.observe('dom:loaded', function() 
     $('link1').observe('click',function(){ 
      $('div1').toggle(); 
     }); 
     $('showall').observe('click',function(){ 
      $('showLessInfo').toggle(); 
      $('showAllInfo').toggle(); 
      $('showAllInfoLink').toggle(); 
     }); 
     $('showless').observe('click',function(){ 
      $('showLessInfo').toggle(); 
      $('showAllInfo').toggle(); 
      $('showAllInfoLink').toggle(); 
     }); 
    }); 

</script> 

Теперь для дополнительной бонус, я изменил href="#" на href="javascript:void(0);", чтобы избежать необходимости останавливать ev Ent.

Answer 2

Чувак, ваши селекторы все испорчены. Вы не можете просто использовать $('div1'), потому что ничего не вернете. Если это класс, используйте $('.div1'), и если он использует идентификатор $('#div1').

Кроме того, возможно, чтобы не писать свои обработчики в ряд, гораздо труднее прочитать и заметить возможные ошибки. Просто поместите все это в отдельный файл javascript.