Проблема с this
Подскажите, пожалуйста. Была задача сделать сполеры в таблице, при нажатии на ссылочкудолна появляться еще одна строчка с пояснениями. Решил так:
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().parent().next().children('th.splCont').toggle();
return false;
});
});
Огород с родителями нагородил эмпирическим больше путем, но спойлер открывается нормально. Теперь возник вопрос, а можно ли при открытии ондного закрывать предыдущий. Я решил, что логично просто закрыть все, а потом открыть этот таким образом: $(document).ready(function(){
$('.splLink').click(function(){
var cont = getElementsByClass('splCont');
for (var i = 0; i < elems.length; i++)
cont[i].style.display = 'none';
$(this).parent().parent().next().children('th.splCont').toggle();
return false;
});
});
Но после этого вообще ткрываться перестало. Я так понимаю, что это из-за того, что this меняется, т.к. даже если закоментить 4 и5 строчку не открывает все равно. Подскажате пожалуйста, как решить проблему? Может есть другой способ все позакрывать? Пока склоняюсь к обновлению страницы, но это ужасно выглядит. |
Iktash,
Выложите HTML код эксперимента |
Вот, вроде все лишнее убрал, а нужное оставил. Табличка(выдается php из mysql в зависимости от того, как пользователь заполнил форму на предыдущей странице) такая получается:
<table id='result_table_loans' > <tr id='topresult'><td class='result_cell'></td> <td class='result_cell'><img src='1.jpg' ></td> <td class='result_cell'><img src='2.jpg'></td> <td class='result_cell'><img src='3.jpg' ></td> <td class='result_cell'><img src='4.jpg' ></td> <td class='result_cell'><img src='5.jpg' ></td> <td class='result_cell'><img src='6.jpg'></td> </tr><tr> <td class='result_cell'>Альфа-банк</td> <td class='result_cell'>10</td> <td class='result_cell'>нет</td> <td class='result_cell'>11000</td> <td class='result_cell'><span class='splLink'>подробнее</span></td> <td class='result_cell'><a class='sent' href=''>отправить</a></td> </tr> <tr> <th colspan='7' class='splCont'><table class='info'><tr><td><img src='img/tape/littlepic2.jpg'/></td><td><h3>Альфа-банк<h3></td><td>Альфа-Банк основан в ....</td> </tr></table><table class='info small_info'><tr><td>Первый взнос</td><td>Материальное<br> обеспечение</td><td>Возможность досрочного<br> погашения</td><td>Дополнительная информация</td></tr><tr><td>1000</td><td>Не требуется</td><td>Есть</td><td><h3>бла-бла-бла</h3><br>бла-бла-бла<br>бла-бла-бла</td></tr></table></th></tr> <tr> <td class='result_cell'>Газпромбанк</td> <td class='result_cell'>10</td> <td class='result_cell'>нет</td> <td class='result_cell'>11000</td> <td class='result_cell'><span class='splLink'>подробнее</span></td> <td class='result_cell'><a class='sent' href='http://alfabank.ru/sme/partner/form/'>отправить</a></td> </tr> <tr> <th colspan='7' class='splCont'><table class='info'><tr><td><img src='img/tape/littlepic3.jpg'/></td><td><h3>Газпромбанк<h3></td><td>"Газпромбанк" (Открытое акционерное общество) – один из крупнейших...</td> </tr></table><table class='info small_info'><tr><td>Первый взнос</td><td>Материальное<br> обеспечение</td><td>Возможность досрочного<br> погашения</td><td>Дополнительная информация</td></tr><tr><td>1000</td><td>Не требуется</td><td>Есть</td><td><h3>бла-бла-бла</h3><br>бла-бла-бла<br>бла-бла-бла</td></tr></table></th></tr> </table> Картинки вначале - это заголовки. Ну, весь остальной код страницы вроде не должен тут влиять - все внутри таблицы происходит. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заплатит ли Мадонна Милонову ? :)</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
.splLink {
cursor:pointer;
color:blue;
text-decoration: underline;
}
.splCont {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
var a=$(this).parents('tr:first').next();
$(".splCont").not(a).hide(); a.toggle(400);
return false;
});
});
</script>
</head>
<body>
<table cols=7 id="result_table_loans" border="1">
<tbody>
<tr id="topresult">
<td class="result_cell">--</td>
<td class="result_cell">
<img src="1.jpg">
</td>
<td class="result_cell">
<img src="2.jpg">
</td>
<td class="result_cell">
<img src="3.jpg">
</td>
<td class="result_cell">
<img src="4.jpg">
</td>
<td class="result_cell">
<img src="5.jpg">
</td>
<td class="result_cell">
<img src="6.jpg">
</td>
</tr>
<tr>
<td class="result_cell">Альфа-банк</td>
<td class="result_cell">10</td>
<td class="result_cell">нет</td>
<td class="result_cell">11000</td>
<td class="result_cell">
<span class="splLink">подробнее</span>
</td>
<td class="result_cell">
<a class="sent" href="">отправить</a>
</td>
<td class="result_cell">--</td>
</tr>
<tr class="splCont">
<th colspan="7">
<table class="info" width=100%>
<tbody>
<tr>
<td>
<img src="img/tape/littlepic2.jpg">
</td>
<td>
<h3>
Альфа-банк
<h3></h3>
</h3>
</td>
<td>Альфа-Банк основан в ....</td>
</tr>
</tbody>
</table>
<table class="info small_info" width=100%>
<tbody>
<tr>
<td>Первый взнос</td>
<td>
Материальное
<br>
обеспечение
</td>
<td>
Возможность досрочного
<br>
погашения
</td>
<td>Дополнительная информация</td>
</tr>
<tr>
<td>1000</td>
<td>Не требуется</td>
<td>Есть</td>
<td>
<h3>бла-бла-бла</h3>
<br>
бла-бла-бла
<br>
бла-бла-бла
</td>
</tr>
</tbody>
</table>
</th>
</tr>
<tr>
<td class="result_cell">Газпромбанк</td>
<td class="result_cell">10</td>
<td class="result_cell">нет</td>
<td class="result_cell">11000</td>
<td class="result_cell">
<span class="splLink">подробнее</span>
</td>
<td class="result_cell">
<a class="sent" href="http://alfabank.ru/sme/partner/form/">отправить</a>
</td>
<td class="result_cell">--</td>
</tr>
<tr class="splCont">
<th colspan="7">
<table class="info" width=100%>
<tbody>
<tr>
<td>
<img src="img/tape/littlepic3.jpg">
</td>
<td>
<h3>
Газпромбанк
<h3></h3>
</h3>
</td>
<td>"Газпромбанк" (Открытое акционерное общество) – один из крупнейших...</td>
</tr>
</tbody>
</table>
<table class="info small_info">
<tbody>
<tr>
<td>Первый взнос</td>
<td>
Материальное
<br>
обеспечение
</td>
<td>
Возможность досрочного
<br>
погашения
</td>
<td>Дополнительная информация</td>
</tr>
<tr>
<td>1000</td>
<td>Не требуется</td>
<td>Есть</td>
<td>
<h3>бла-бла-бла</h3>
<br>
бла-бла-бла
<br>
бла-бла-бла
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</body>
</html>
Таблица кривая - нет 7-й последней ячейки - (*добавил с прочерками |
Спасибо большое.
А 7 колонка была, просто там еще один скрипт, я его вырезал, что б не мешал - к делу не относится. А не подскажите, где можно про "parents('tr:first').next()" почитать. А то я не очень понимаю, кто кому родитель и как это задавать. |
Iktash,
Собственно тут нужна просто тренировка на небольших примерах http://jquery-docs.ru/Traversing/ Смысл строк var a=$(this).parents('tr:first').next();
$(".splCont").not(a).hide(); a.toggle(400)
Ищем первый родительский элемент с tr, и далее ищем следущий за ним(это и будет tr.splCont Исключаем из массива элементов $(".splCont") - текущий скрываемо-раскрываемый элемент tr.splCont И скрываем все оставшиеся. Текущий элемент tr.splCont - скрываем или разворачиваем методом toggle() |
| Часовой пояс GMT +3, время: 08:05. |