Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проблема с this (https://javascript.ru/forum/dom-window/31104-problema-s.html)

Iktash 27.08.2012 09:33

Проблема с 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 строчку не открывает все равно. Подскажате пожалуйста, как решить проблему? Может есть другой способ все позакрывать? Пока склоняюсь к обновлению страницы, но это ужасно выглядит.

Deff 27.08.2012 09:59

Iktash,
Выложите HTML код эксперимента

Iktash 27.08.2012 10:24

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

Картинки вначале - это заголовки. Ну, весь остальной код страницы вроде не должен тут влиять - все внутри таблицы происходит.

Deff 27.08.2012 11:21

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

Iktash 27.08.2012 11:44

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

Deff 27.08.2012 11:58

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, время: 10:49.