mootools показать / скрыть div в зависимости от того, установлен флажок или нет
У меня есть флажок, который я хочу, чтобы показать набор полей в форме, зависящей от того, установлен флажок или нет или нет? То есть, если флажок установлен, не показывать набор полей, а если он не показывать набор полей.
Моя разметка выглядит так,
<fieldset class="toplined">
<label>Keep Image</label>
<input type="checkbox" name="update_image[]" value="1" id="toggle" checked='true'/>
</fieldset>
<fieldset class="toplined toggle_slide">
<label>Image:</label>
<input type="file" name="article_image[]">
</fieldset>
набор полей с классом toggle_slide - это то, что я хочу показать / скрыть, в настоящее время у меня есть этот скрипт mootools
$('toggle').addEvent('click', function(e){
e = new Event(e);
$$('.toplined toggle_slide').toggle();
e.stop();
});
однако это просто приводит к ошибкам.
2 ответа
Решение
Вот быстрое решение. Если вы заинтересованы или хотите получить больше информации о том, как заставить это работать, читайте дальше!
$('toggle').addEvent('click', function(e){
if(this.checked)) {
$$('.toggle_slide').toggle();
}
});
События
В Mootools все элементы имеют метод addEvent, который принимает два аргумента. Первый аргумент - это тип события (например, щелчок), а второй - функция, которая вызывается при возникновении этого события. Эта функция имеет автоматически переданный ей аргумент, которым является само событие. Следовательно, создание нового события внутри метода addEvent является большой ошибкой, так как новое событие не будет тем же, которое вызвало функцию метода addEvent. Вы можете указать имя аргумента события по умолчанию в списке параметров функции и затем использовать его как обычно. Следовательно, в вашем коде e уже существует, так как именно это вы назвали событием в этом фрагменте кода: function(e){
и все линии e = new Event(e);
do перезаписывает этот параметр пустым событием по умолчанию. Это почти наверняка не то, что вы хотите.
Многие действия происходят, когда события происходят, даже если JavaScript отсутствует. Например, когда форма отправляется, событие submit указывает браузеру собрать данные для этой формы и отправить их в действие формы. Другой пример: когда вы нажимаете на ссылку, событие click указывает браузеру перейти по этой ссылке. Они известны как события по умолчанию. Однако, когда мы прикрепили метод addEvent, скажем, к ссылке, мы хотим, чтобы выполнялись наши собственные действия, а не браузер по умолчанию. Мы можем предотвратить эти действия по умолчанию, используя метод stop для объектов событий.
Так как e - ваш объект события, e.stop() предотвратит любые действия по умолчанию. Однако в этом случае действие по умолчанию для события щелчка на флажке состоит в том, чтобы установить или снять этот флажок. e.stop() может предотвратить это (я не проверял), но в лучшем случае абсолютно ничего не сделает. Таким образом, он либо запутает ваших пользователей, либо ничего не сделает, поэтому я предлагаю вам удалить его.
Наконец, в функции addEvent вы можете использовать this
ключевое слово для ссылки на элемент, к которому прикреплено событие.
Селекторы
Mootools имеет очень продвинутую систему выбора, которая позволяет выбирать практически все, что вы хотите. Вам нужно выбрать свой набор полей, который имеет два класса. Тем не менее, селектор, который вы выбрали, $$('.toplined toggle_slide')
, говорит "Найти элементы с классом, выделенным сверху, а затем внутри этого элемента, найти элементы с тегом toggle_slide". Вместо этого вы должны использовать $$('.toggle_slide')
элементы
Вы можете определить, установлен ли флажок с помощью свойства selected. Это вернет true, если флажок установлен, и false в противном случае. В вашем случае, поскольку флажок является элементом, к которому вы добавляете событие, вы можете использовать this.checked
определить, проверен ли он или нет.
Совет: Если вы используете Firebug, вы можете использовать console.log для печати в консоли любого элемента. Это отобразит все свойства и методы, которыми обладает этот элемент в данный момент времени. Это откроет вам такие вещи, как проверено довольно быстро.
Кроме того, Mootools разделен на два компонента: ядро Mootools и Mootools. Метод toggle определяется только в Elements, если в Mootools включено Element.Shortcuts или вы сами написали этот метод. В противном случае вы получите ошибку.
Пытаться document.getElement("fieldset.toplined.toggle_slide").toggle();