Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2012, 09:33
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

Проблема с 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 строчку не открывает все равно. Подскажате пожалуйста, как решить проблему? Может есть другой способ все позакрывать? Пока склоняюсь к обновлению страницы, но это ужасно выглядит.
Ответить с цитированием
  #2 (permalink)  
Старый 27.08.2012, 09:59
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Iktash,
Выложите HTML код эксперимента
Ответить с цитированием
  #3 (permalink)  
Старый 27.08.2012, 10:24
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

Вот, вроде все лишнее убрал, а нужное оставил. Табличка(выдается 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>

Картинки вначале - это заголовки. Ну, весь остальной код страницы вроде не должен тут влиять - все внутри таблицы происходит.
Ответить с цитированием
  #4 (permalink)  
Старый 27.08.2012, 11:21
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!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-й последней ячейки - (*добавил с прочерками

Последний раз редактировалось Deff, 27.08.2012 в 11:24.
Ответить с цитированием
  #5 (permalink)  
Старый 27.08.2012, 11:44
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

Спасибо большое.
А 7 колонка была, просто там еще один скрипт, я его вырезал, что б не мешал - к делу не относится.
А не подскажите, где можно про "parents('tr:first').next()" почитать. А то я не очень понимаю, кто кому родитель и как это задавать.

Последний раз редактировалось Iktash, 27.08.2012 в 11:52.
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2012, 11:58
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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()

Последний раз редактировалось Deff, 27.08.2012 в 12:05. Причина: строки
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Проблема с Popup окном vovuslik jQuery 5 12.06.2010 16:12
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19
Проблема, в менюшке Большой джо Элементы интерфейса 0 12.07.2009 17:12
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47