1

Есть код

if ( $("#payment").hasClass("checked") ) {

document.getElementById("uniform-id_carrier1300").style.display='none';

} else {
document.getElementById("uniform-id_carrier1300").style.display='block';
}

При его выполнение все работает, но один раз. Хотелось бы, чтобы шла постоянная проверка названия класса. То есть, если элемент имеет название класса "чекед", то скрыть элемент, если у этого элемента нету в названии класса "чекед" то показать.

4
  • А зачем Вы, используя Jquery, пишете "document.getElementById"?? 5 мар 2017 в 10:13
  • @humster_spb, так быстрее же)
    – vp_arth
    5 мар 2017 в 10:14
  • Хотелось бы уточнить что познаний в js нет. К сожалению (( Код выше был взят из интернета.
    – midagent
    5 мар 2017 в 10:16
  • Тебе нужен обработчик onchange, который следит за изменениями, а для соответствующего обработчика нужен код, который "тугглит" стиль для отображения элемента (врубает дисплей блок или же убирает в зависимости от того, какое значение у него сейчас). 5 мар 2017 в 10:19

3 ответа 3

3

В реализацию вашего чекбокса можно добавить эмиссию события смены состояния.

Найдите место, где меняется класс checked. Это либо .toggleClass('checked'), либо пара addClass/removeClass в разных местах.

В каждом добавьте эмиссию события change:

$(this).trigger('change', [checked]); // checked - bool состояние чекбокса

Вместо this возможно придётся написать другую переменную, указывающую на меняющийся элемент.

Тогда, в клиентском коде вы сможете отловить это событие:

$('#payment').on('change', function(e, checked){
  $('#blockToToggle')[checked?'show':'hide']();
});
5
  • Мой чекбокс сделан с помощью таблиц. Как понять что был выбран tr ? При выборе, добавляется в название класса "checked". Насколько я понимаю, можно отловить только по названию класса.
    – midagent
    5 мар 2017 в 10:22
  • вот там, где добавляется класс и добавьте trigger
    – vp_arth
    5 мар 2017 в 10:22
  • if ( $("#payment").hasClass("checked") ) { $(this).trigger('change', [checked]); } else { $(this).trigger('change', [checked2]); }
    – midagent
    5 мар 2017 в 10:27
  • код выше не работает. Что не так?
    – midagent
    5 мар 2017 в 10:27
  • Всё не так. Вам нужен код с .addClass('checked') или toggle
    – vp_arth
    5 мар 2017 в 10:28
1

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

В вашем случае, код мог бы выглядеть как-то так:

var observer = new MutationObserver(function(mutations) {
    mutations.filter(function(mutation) {
        return (mutation.type === 'attributes' && mutation.attributeName === 'class');
    }).forEach(function(mutation) {
        if ($(mutation.target).is('.checked')) {
            $('#extra-field').hide();
        } else {
            $('#extra-field').show();
        }
    });    
});

observer.observe($('#payment').get(0), {attributes: true});

А вот и рабочий пример на JSFiddle.

Замечение:

Не смотря на то, что подход с использованием MutationObserver вполне работоспособен, я бы использовал его только как "последнее средство". Это слишком уж мощное и не очевидное решение тривиальных задач, вроде вашей.

Вместо этого, я посоветовал бы вам переписать ваш кастомный checkbox так, чтобы он генерировал событие onchange (или аналогичное). О том, как это сделать, написано в соседнем ответе.

0

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

Следить за изменением можно этим - https://api.jquery.com/change/

5
  • Как вы поняли, что там чекбокс?
    – vp_arth
    5 мар 2017 в 10:13
  • дело в том, что там не select, а чекбокс сделанный с помощью div.
    – midagent
    5 мар 2017 в 10:14
  • А когда ставите класс checked, то не можете сразу же скрыть/показать нужный блок?
    – anme
    5 мар 2017 в 10:15
  • @vp_arth по названию класса
    – midagent
    5 мар 2017 в 10:15
  • @anme change насколько я понял работает только на поля. В моем случае проверить возможно только по названию класса.
    – midagent
    5 мар 2017 в 10:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.