Переключить ближайший DIV в таблице

У меня есть таблица с флажками, которые имеют класс .toggle экстракта и при нажатии на которые я хотел бы, чтобы они переключить ближайший DIV с именем класса .extract-летнегоПереключить ближайший DIV в таблице

Теперь код, который у меня должен работать, но это заставляет меня задуматься, почему он не срабатывает.

вот пример JSFiddle.

$(document).ready(function() { 
    $('.toggle-extract').on('click', function() { 
     $(this).closest('div').find('.extract-years').toggle("fast"); 
    }); 
});

и вот HTML

<table> 
    <tr> 
     <td> 
      <input type="checkbox" class="toggle-extract"> 
     </td> 
     <td> 
      <div class="extract-years">Toggle Box</div> 
     </td> 
    </tr>   
    <tr> 
     <td> 
      <input type="checkbox" class="toggle-extract"> 
     </td> 
     <td> 
      <div class="extract-years">Toggle Box</div> 
     </td> 
    </tr> 
</table>

источник

2014-12-30 zemaker

'closest' подберет родителя' div' входа –

и дополнить комментарий @SamBattat «s, класс '.toggle-extract' не имеет родительского' div' (по крайней мере, в предоставленном HTML-коде) – ochi

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

вот так: [Fiddle] (http://jsfiddle.net/ywbh2m3q/1/) – zemaker

ответ

Вы можете изменить к

$(this).closest('tr').find('.extract-years').toggle("fast");

$(document).ready(function() { 
 
    $('.toggle-extract').on('click', function() { 
 
    $(this).closest('tr').find('.extract-years').toggle("fast"); 
 
    }); 
 
});

body { 
 
    color: #000; 
 
} 
 
.extract-years { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class="toggle-extract"> 
 
    </td> 
 
    <td> 
 
     <div class="extract-years">Toggle Box</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class="toggle-extract"> 
 
    </td> 
 
    <td> 
 
     <div class="extract-years">Toggle Box</div> 
 
    </td> 
 
    </tr> 
 
</table>

Fiddle

Обновление: для второй версии, упомянутой в качестве комментария, инструкция выбора может быть изменена, например.

$(this).closest('table').parent("td").next("td"). 
     find('.extract-years').toggle("fast");

Скорректированная Fiddle и рабочая версия здесь:

$(document).ready(function() { 
 
    $('.toggle-extract').on('click', function() { 
 
    $(this).closest('table').parent("td").next("td").find('.extract-years').toggle("fast"); 
 
    }); 
 
});

body { 
 
    color: #000; 
 
} 
 
.extract-years { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <table class="inline-table-body"> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <input type="checkbox" class="toggle-extract"> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <div class="extract-years">Toggle Box</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <table class="inline-table-body"> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <input type="checkbox" class="toggle-extract"> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <div class="extract-years">Toggle Box</div> 
 
    </td> 
 
    </tr> 
 
</table>

источник

2014-12-30 21:24:50

Смотрите мой обновленный код, где этот пример не работает. [Обновлен код] (http://jsfiddle.net/ywbh2m3q/1/) – zemaker

Смежные вопросы