Блог

Главная - Вопросы по программированию - Прослушивание переключателей при изменении и когда документ будет готов с помощью jQuery?

Прослушивание переключателей при изменении и когда документ будет готов с помощью jQuery?

#jquery #html #forms #radio-button

#jquery #HTML #формы #переключатель

Вопрос:

Я ищу везде, и я могу найти только, как создать прослушиватель переключателей или как проверить, включен ли он ready , но никогда оба, как мне нужно:

Когда я редактирую объект в форме, в зависимости от того, что было выбрано в радиогруппе, a div должно быть видимым или скрытым. И когда пользователь изменит это, оно должно появиться / исчезнуть снова.

Я мог бы инициализировать правильное состояние, добавив скрытый класс на стороне сервера к div , но тогда мне пришлось бы программировать все мои зависимости на php И jQuery, поскольку я не использую AJAX — это не имеет смысла для меня.

Я посмотрел на веб-сайте jQuery для лучшей практики — похоже, это было так.
Но я не понимаю, как я должен это делать в моем случае — $(this) кажется, что это не работает, и я точно не знаю почему. Потому что я ссылаюсь на функцию вне события? 

 var fieldHider = function (turnOn, toggleFields, fadeIn) {
    var visibilityAction;
    if (turnOn) {
        visibilityAction = (fadeIn) ? "fadeIn" : "show";
    } else {
        visibilityAction = (fadeIn) ? "fadeOut" : "hide";
    }
    $(toggleFields)[visibilityAction]();
};

var translatorRadioChanged = function (event) {
    var isOn = ($(this).val() === '1');
    var fading = (event) ? true : false;
    fieldHider(isOn,'label[for="translator"]', fading);
};

var translatorRadioNames = "translatorNeeded";

$(function () {
    $("input[name='"   translatorRadioNames   "']").change(translatorRadioChanged);
    translatorRadioChanged();
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="translatorNeeded">
Translator needed
<input type="radio" value="1" name="translatorNeeded">
Yes
<input type="radio" value="0" checked="checked" name="translatorNeeded">
No -> Div below should be hidden!
</label>
<br>
<br>
<label for="translator">
<label class="lcapp-label clearfix" for="translator">
Translator Name   Language
<input type="text" name="name" size="5">
<input type="text" name="lang" size="5">
</label>
</label>

Ответ №1:

Вы вызываете функцию с 2 разными контекстами.

Попробуйте просто запустить событие изменения для соответствующего проверяемого ввода при загрузке страницы и после назначения прослушивателя изменений

Изменить

 $("input[name='"   translatorRadioNames   "']").change(translatorRadioChanged);
translatorRadioChanged();

Для

 $("input[name='"   translatorRadioNames   "']")
       // assign event listener
       .change(translatorRadioChanged)
       // trigger the event on checked one if it exists
       .filter(':checked').change();

Теперь функция будет вызываться в контексте обработчика событий и будет иметь правильный контекст для this

Комментарии:

1. Мне нравится ваш ответ, но я только что заметил, что когда я выполняю этот код с вашим изменением, он запускает translatorRadioChanged функцию дважды — сначала с true, а затем с false. О чем это?

2. будет срабатывать для каждого элемента в коллекции. Я действительно не анализировал внимательно, что находится внутри обработчика… был больше сосредоточен на контексте

3. Другим способом было бы .change(translatorRadioChanged).filter(':checked').change();

4. вот и все, спасибо — я не знал о методе фильтрации, и теперь я лучше понимаю ваше решение, это именно то, что я искал 🙂

Ответ №2:

this in ready — это window .

измените его, чтобы искать значение :checked радио:-

 var fieldHider = function (turnOn, toggleFields, fadeIn) {
    var visibilityAction;
    if (turnOn) {
        visibilityAction = (fadeIn) ? "fadeIn" : "show";
    } else {
        visibilityAction = (fadeIn) ? "fadeOut" : "hide";
    }
    $(toggleFields)[visibilityAction]();
};

var translatorRadioChanged = function (event) {
    var isOn = ($("input[name='"   translatorRadioNames   "']:checked").val() === '1');
    var fading = (event) ? true : false;
    fieldHider(isOn,'label[for="translator"]', fading);
};

var translatorRadioNames = "translatorNeeded";

$(function () {
    $("input[name='"   translatorRadioNames   "']").change(translatorRadioChanged);
    translatorRadioChanged();
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="translatorNeeded">
Translator needed
<input type="radio" value="1" name="translatorNeeded">
Yes
<input type="radio" value="0" checked="checked" name="translatorNeeded">
No -> Div below should be hidden!
</label>
<br>
<br>
<label for="translator">
<label class="lcapp-label clearfix" for="translator">
Translator Name   Language
<input type="text" name="name" size="5">
<input type="text" name="lang" size="5">
</label>
</label>

Комментарии:

1. Я не был достаточно ясен со своим вопросом, я думаю. Я не хочу снова ссылаться на радиостанции со строкой в своем коде, потому что я думаю, что это выглядит плохо, и я хочу найти более плавный способ, с помощью которого я также могу повторно использовать my translatorRadioChanged() для всех других радиостанций, 'label[for="translator"]' заменив их переменной позже.