Переопределить флажок в JavaScript с помощью jQuery

Помощь при работе с блочным тестированием. У меня есть эта страница:Переопределить флажок в JavaScript с помощью jQuery

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body'); 
      $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body'); 

      $('#makeHidden').click(function() { 
       var isChecked = $(this).is(':checked'); 

       if (isChecked) { 
        $('#displayer').hide(); 
       } 
       else { 
        $('#displayer').show(); 
       } 
       return false; 
      }); 

     }); 

    </script> 
</head> 
<body> 
</body> 
</html>

Это не работает, из-за return false; в обработчик щелчка. Если я удалю его, он отлично работает. Проблема заключается в том, если я тяну функцию щелчка из в его собственной функции и модульного тестирования его с QUnit он не будет работать без return false;

[EDIT] Использование @ Патрикс ответить на мои результаты:

Firefox :

Ручной тест на игрушку - хорошо.
Единицы испытаний - хорошо.
Ручной тест производственного приложения - хорошо.

Internet Explorer:

Ручной тест игрушки - не в состоянии.
Единицы испытаний - хорошо.
Ручной тест производственного приложения - сбой.

Internet Explorer требует сначала одного щелчка. после этого требуется два клика.

Я думал, что jQuery - это абстрактные браузеры?

Должен ли я переопределить поведение всего поля для решения?

В моих модульных тестов это то, как я делаю имитацию флажок пользователь:

$(':input[name=shipToNotActive]').removeAttr('checked'); 
$('#shipToNotActive').change();

, а также:

$(':input[name=shipToNotActive]').attr('checked', 'checked'); 
$('#shipToNotActive').change();

источник

2010-05-20 Gutzofter

Как об использовании change вместо click?

$('#makeHidden').change(function() { 
      var isChecked = $(this).is(':checked'); 

      if (isChecked) { 
       $('#displayer').hide(); 
      } 
      else { 
       $('#displayer').show(); 
      } 
      return false; 
     });

return false; не будет в пути, так как событие вызывается в результате изменения, имевших место.

источник

2010-05-20 15:34:06 user113716

Это работает до сих пор в моем примере с игрушкой. теперь позвольте мне запустить мои тесты в реальном коде! – Gutzofter

Звучит неплохо. Позвольте мне знать, как это получается. – user113716

Работает как очарование в Firefox. Firefox: ручной тест на игрушку - хорошо. Единичные тесты - хорошо. Ручное тестирование производственного приложения - хорошее. Internet Explorer: ручной тест игрушек - сбой. Единичные тесты - хорошо. Ручное тестирование производственного приложения - сбой. Internet Explorer требует сначала одного щелчка. после этого требуется два клика. – Gutzofter

Попробуйте это:

$(function() { 
    $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body'); 
    $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body'); 

    $('#makeHidden').click(function() { return onCheckboxClicked(this) }); 
}); 

function onCheckboxClicked(el) { 
    var isChecked = $(el).is(':checked'); 

    if (isChecked) { 
     $('#displayer').hide(); 
    } 
    else { 
     $('#displayer').show(); 
    } 
    return false; 
}

источник

2010-05-20 15:32:02

по этой дороге. из-за того, что return false, он переопределяет поведение флажка. Он всегда будет проверяться. он запускает клик, но затем сбрасывает проверенное свойство внутри флажка. действительно отсталый. происходит в ie и firefox – Gutzofter

Here is a work around.

Теперь мой код выглядит так:

 if ($.browser.msie) { 
      $('#makeHidden').change(function() { 
       this.blur(); 
       this.focus(); 
       onCheckboxClicked(); 
      }); 
     } 
     else { 
      $('#makeHidden').change(function() { 
       return onCheckboxClicked(); 
      }); 
     }

Всех мои тесты, включая ручную игрушку и ручное производство хороши.

У кого-нибудь есть что-то лучше этого взлома?

источник

2010-05-20 16:54:34 Gutzofter

+1 - Интересно, что я недавно работал над некоторой аналогичной проблемой IE 'change', за исключением списка' select'. Для этого решения/взлома требуется собственный API 'blur()' и 'focus()' как ваш. В отличие от вашей, эта проблема была с 'change' * not * firing в первый раз, но второе изменение (и каждое изменение после этого) было запущено. Таким образом, решение было jQuery 'focus()', а затем нативный 'blur() focus()'. К счастью, проверка браузера не потребовалась, так как взлом выполнялся только один раз. Я отслеживаю это как напоминание. Спасибо, что опубликовали ваше решение. – user113716

Проблема в том, что мои модульные тесты не отразили проблему. Я думаю, именно поэтому вы не должны проверять gui. – Gutzofter

Помог с проблемой, которую я имел. Вместо проверки IE я только что опубликовал размытие/фокус независимо от браузера. – vol7ron

Переопределить флажок в JavaScript с помощью jQuery

ответ

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