Скрытие - показ элементов
Есть две одинаковые таблицы:
<table class="form-table no-border"> <tbody> <tr class="parent"> <th scope="row">Заголовок</th> <td> <label class="switch_wrap"> <input name="option[ym]" id="ym" class="parent" value="1" type="checkbox"> </label> </td> </tr> <tr> <th>Заголовок</th> <td>Текст</td> </tr> </tbody> </table> <table class="form-table no-border"> <tbody> <tr class="parent"> <th scope="row">Заголовок</th> <td> <label class="switch_wrap"> <input name="option[ym]" id="ym" class="parent" value="1" type="checkbox"> </label> </td> </tr> <tr> <th>Заголовок</th> <td>Текст</td> </tr> </tbody> </table> При изменении input parent на checked, нужно скрывать блок tr, который ниже. Мой js такой: $(document).ready(function(){ var _this = $('.switch_wrap .parent'); _this.change(function(){ if (_this.prop('checked')) { _this.parents(3).nextAll('tr').fadeIn(); } else { _this.parents(3).nextAll('tr').fadeOut(); } }); if (_this.prop('checked')) { _this.parents(3).nextAll('tr').fadeIn(); } else { _this.parents(3).nextAll('tr').fadeOut(); } }); Однако, при переключении чекбокса из второй таблицы, скрытие и показ срабатывает только tr из первой |
Как сделать, чтобы срабатывал на ту таблицу, в которой расположен чекбокс
|
Какое-то дежавю.... https://javascript.ru/forum/dom-wind...i-tablicy.html
<table class="form-table no-border"> <tbody> <tr class="parent"> <th scope="row">Заголовок</th> <td> <label class="switch_wrap"> <input name="option[ym]" id="ym" class="parent" value="1" type="checkbox"> </label> </td> </tr> <tr> <th>Заголовок</th> <td>Текст</td> </tr> </tbody> </table> <table class="form-table no-border"> <tbody> <tr class="parent"> <th scope="row">Заголовок</th> <td> <label class="switch_wrap"> <input name="option[ym]" id="ym" class="parent" value="1" type="checkbox"> </label> </td> </tr> <tr> <th>Заголовок</th> <td>Текст</td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ var chex = $('.switch_wrap .parent'); chex.change(function(){ var _this = $(this); if ( _this.prop('checked')) { _this.parents(3).nextAll('tr').fadeIn(); } else { _this.parents(3).nextAll('tr').fadeOut(); } }); chex.parents(3).nextAll('tr').fadeOut(); }); </script> И еще: во избежание дальнейших проблем не должно быть два раза id="ym" |
Часовой пояс GMT +3, время: 09:18. |