У меня есть список элементов из БД и показать в таблице с помощью кнопки:
<a href="#" class="hiden"></a>
для отображения и скрытия информации,
<div class="object></div>
Мой сценарий jQuery:
$(document).ready(function() {
$(".object").hide();
$('.hiden').click(function() {
$(".object").toggle();
});
});
HTML:
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th class="but" colspan="2"></th>
</tr>
</thead>
<tbody>
<?php foreach($model as $object): ?>
<tr>
<td><a href="#"><?php echo $object->name; ?></a></td>
<td></td>
<td></td>
<td class="but">
<a href="#" class="hiden"></a>
</td>
</tr>
<tr>
<td colspan="4">
<div class="object">
<table class="table table-bordered">
</table>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
У меня есть некоторые проблемы, когда нажимают на a.hiden все элементы списка показывают и щелкают все элементы скрыть. Я хочу, пока один элемент отображает другие элементы.
пожалуйста, помогите мне
$(document).ready(function() {
$(".object").hide();
$('.hiden').click(function() {
$(this).parents('tr').next().find(".object").toggle();
});
});
Поведение, которое вы описываете, - это то, что вы на самом деле закодировали. Ваш селектор
$(".object").toggle()
переключает все элементы с классом .object
, а не только один. Чтобы переключить только ту, что в одной и той же строке таблицы, вы могли бы
$('.hiden').click(function() {
$(this).parent("tr").next().find(".object").toggle();
});
Toogle - это правильный путь, но каждый из ваших элементов должен иметь уникальный идентификатор, если вы нажмете на них и активируете событие.
Изменить:
$(".object").toggle();
чтобы:
$(this).closest('tr').next().find(".object").toggle();