Отладка jQuery и помощь селектора с флажком и div - PullRequest
Новая
       36

Отладка jQuery и помощь селектора с флажком и div

0 голосов
/ 20 ноября 2010

У меня есть несколько таблиц на моей странице, которые содержат флажок.Сразу за таблицей находится div, который по умолчанию скрыт.Я хочу показать / скрыть div в зависимости от выбора флажка.

Поскольку у меня есть около 10 из этих структур, я хочу найти способ создать выделение одним щелчком, чтобы обрабатывать любое нажатие.

HTML: 

<table>  
<input id='cbChecklist1'>  
</table>

<div id='divChecklist1'>  
Show/Hide  
</div>

Итак, у меня есть cbChecklist1-cbChecklist10 и divChecklist1-divChecklist10.Когда во вкладке есть флажок cbChecklistX, я хочу, чтобы он отображал / скрывал соответствующий divChecklistX.

Спасибо!

@@@@@@@@@@@@@@@@@@@ EDIT @@@@@@@@@@@@@@@@@@

Я изменил дизайн своих флажков и таблиц и пытаюсь использовать методы slideDown, slideUp, но не похоже, что я правильно выбираю свой <div> - по крайней мере, он не двигает <div> вверх и вниз.

2 Вопросы: 1. Правильно ли я изменяю<div> селектор?2. Как мне отладить это, чтобы узнать, как работает выбор?

Обновлен HTML: 

<table>  
<input id='cbPressueChecklist'>  
</table>

<div id='divPressueChecklist'>  
Show/Hide  
</div>


<table>  
<input id='cbMechanicalChecklist'>  
</table>

<div id='divMechanicalChecklist'>  
Show/Hide  
</div>

Мой код jQuery: 

$('input[id$=Checklist]').change(function()  
{  
    var divId = '#div' + this.id.substring(2);  
    if (this.checked)  
        $(divId).slideDown(1500);  
    else  
        $(divId).hide(1500);  
});

Еще раз спасибо.

1 Ответ

3 голосов
/ 20 ноября 2010 
$('input[id^=cbChecklist]').change(function() {
    var divId = '#divChecklist' + this.id.match(/\d+$/)[0];
    $( divId ).toggle( this.checked );
});

Связывает a .change() обработчик событий с <input> элементами, где атрибут ID начинается с cbChecklist.

Когда происходит событие изменения, он извлекает номер из своего идентификатора и объединяет его с #divChecklist для создания селектора.

Тогда .toggle() вызывается для соответствующего <div>, передавая this.checked в качестве переключателя, так что если флажок установлен, он будет show <div>, в противном случае он будет hide.

...