2013-08-26 9 views
-1

У меня есть тумблер с этого сайта CSS Toggle на одной из моих страниц, и я пытаюсь скрыть его и показать поле select2, как переключатель.jQuery, выполняющий оба условия при событии click

Так на Документе Готов ли скрыть вторичную коробку, так как она не нужна, то логика для тумблера:

$("#s2id_author-search").hide(); 
$("#searchSwitch_btn").click(function(){ 
    if($("#s2id_author-search").css('display') === 'none') { 
     console.log("Showing author search: 1"); 
     $("#s2id_author-search").show(); 
     console.log("Hiding title search: 2"); 
     $("#s2id_title-search").hide(); 
    } 
    else { 
     $("#s2id_author-search").hide(); 
     console.log("Hiding author search: 3"); 
     $("#s2id_title-search").show(); 
     console.log("Showing title search: 4"); 
    } 
}); 

При нажатии на переключатель, глядя на FireBug консоли, я могу видеть все Сообщения console.log, показывающие, что скрипт выполняется целиком, а не только один или другие параметры.

P.S. Я знаю, что использование команды toggle() в jQuery более эффективно, но вот как теперь код предназначен для устранения неполадок.

Любые идеи?

+1

У вас должен быть другой JS, конфликтующий с ним. Он отлично работает в этой скрипке http://jsfiddle.net/kevinPHPkevin/GyL6a/ – Vector

+0

Он связан дважды. Выясните, почему он связан дважды, и вы получите ответ. Учитывая то, что вы предоставили, мы не можем это понять. –

+0

Кроме того, команда * "toggle() в jQuery" *, о которой вы говорите, фактически не существует в текущих версиях jQuery, поэтому предпочтительнее (в основном). Вы можете уменьшить часть обработчика вашего кода до одной строки: '$ (" # s2id_title-search, # s2id_author-search "). Toggle()' вместо того, чтобы иметь этот оператор if. –

ответ

0

Изменение состояния от:

if($("#s2id_author-search").css('display') === 'none'){ 

к:

if($("#s2id_author-search").is(':visible')){ 
+0

Выполняет шаги 3 и 4 дважды с вашим предложением. – TuxMeister

0

Ну, попробуйте это

$("#s2id_author-search").hide(); 

     $("#searchSwitch_btn").click(function(){ 
      if($("#s2id_author-search").is(":visible")){ 
       $("#s2id_author-search").hide(); 
       console.log("Hiding author search: 3"); 
       $("#s2id_title-search").show(); 
       console.log("Showing title search: 4"); 
      } 
      else {    
       console.log("Showing author search: 1"); 
       $("#s2id_author-search").show(); 
       console.log("Hiding title search: 2"); 
       $("#s2id_title-search").hide(); 
      } 
     }); 
+0

Я получаю тот же результат. – TuxMeister

+0

@TuxMeister, вы уверены ... Я запускаю код, и divs чередуются. Обязательно скопируйте точный код, который я написал. – Username

+0

@TuxMeister, он также отлично записывается в FireBug Console. Поэтому еще раз скопируйте точный код, который я написал. – Username

0

ли вы определить событие щелчка более одного раза? Если это так, этот код будет работать дважды, выполняя оба условия. И.Е. Вы делали это дважды на одной странице:

$("#searchSwitch_btn").click(...) 
+0

Нет, это единственное событие для этого идентификатора в любом месте проекта. Это очень странно. – TuxMeister

+0

В качестве способа двойной проверки это скажет вам, какие события привязаны к элементу: '$ ._ data ($ (" # searchSwitch_btn ") [0]," events ");'. В противном случае я не уверен, что может вызвать все события console.log для печати. – zigdawgydawg

+0

Как я могу увидеть свойства события? Это объясняется нигде, я видел это на другой странице, и я не могу добраться до этой информации в инспекторе Chrome. – TuxMeister

0

Хорошо, ребята и девочки, поэтому я, наконец, разобрался. Код для самого переключения выглядит следующим образом:

 <label class="checkbox toggle candy blue" style="width: 150px;" id="searchSwitch_btn"> 
      <input type="checkbox" id="searchSwitch" checked="true" /> 
      <p> 
       Search by 
       <span class="switchBtn">Title</span> 
       <span class="switchBtn">Author</span> 
      </p> 
      <a class="slide-button"></a> 
     </label> 

В моем первоначальном посте я связывании событие щелчка на самой этикетке, которая, вероятно, из-за начальной загрузки и Symfony, предназначенный для фокусировки поля, что это парный при нажатии. Поэтому, просто добавив класс swichBtn к обоим промежуткам и используя это как элемент связывания события щелчка, код теперь работает правильно. Спасибо всем за ваш вклад в это!

Смежные вопросы