Форум

modestes · #1 (**permalink**) 08.03.2013, 03:43

Приветствую!

Есть список полей, которые формируются динамически, нужно было сделать выборку этих полей, но не всех подряд, а "от" и "до" выбранного идентификатора. Затем скрывать/показывать эти элементы по клику.

Я это сделал, на сколько хватило знаний, но проблема в том что, я добавляю "текст" после определенного индентификатора, чтобы по клику на тексте происходило скрытие/раскрытие полей, но этот текст после второго клика пропадает.

Для наглядности выложил в песочницу, кликните на слово "тест", выделено красным.
Объясните пожалуйста как решить?

Deff · #2 (**permalink**) 08.03.2013, 04:24

<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
    ol{
    color:#777;
}
.test{
    color:red;
    font-width:bold;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  var a = "<span class='test'>Oткрыть</span><span class='test' style='display: none;'>Закрыть</span>";
  $("#list_cp_price").after(a);
  $("span.test:last").nextUntil("#list_tags_input").addClass('toggle').hide();
  $('.test').click(function(){
       $('.test').toggle();
       $('.toggle').slideToggle(300);
  });

});

</script>
    </head>
    <body>
      <ol>
        <li></li>
        <li id="list_post_title">Поле 0</li>
        <li id="list_cp_whram">Поле 1</li>
        <li id="list_cp_whbezram">Поле 2</li>
        <li id="list_post_content">Поле 3</li>
        <li id="list_cp_city">Поле 4</li>
        <li id="list_cp_street">Поле 5</li>
        <li id="list_cp_email">Поле 6</li>
        <li id="list_cp_phone">Поле 7</li>
        <li id="list_cp_phonetwo">Поле 8</li>
        <li id="list_cp_dostavka">Поле 9</li>
        <li id="list_cp_price">Поле 10 (тут начинается)</li>
        <li id="list_cp_ramka" >Поле 11</li>
        <li id="list_cp_canva" >Поле 12</li>
        <li id="list_cp_canvaschet" >Поле 13</li>
        <li id="list_cp_markanitok" >Поле 14</li>
        <li id="list_cp_colors" >Поле 15</li>
        <li id="list_cp_cresthor" >Поле 16</li>
        <li id="list_cp_crestver" >Поле 17</li>
        <li id="list_cp_steklo" >Поле 18</li>
        <li id="list_cp_dopmat" >Поле 19</li>
        <li id="list_tags_input">Поле 20 (тут заканчивается)</li>
        <li id="list_tags_filed-1">Поле 21</li>
        <li id="list_tags_filed-2">Поле 22</li>
      </ol>
    </body>
  </html>

/lilist_cp_ramka

modestes · #3 (**permalink**) 08.03.2013, 04:28

Спасибо, из соседней темы нашел решение и адаптировал.

var a = $("#list_cp_price").nextUntil("#list_tags_input").hide();
  $("#list_cp_price").after("<span class='test'>Развернуть</span>");
  $('.test').click(function(){
    $(a).toggleClass('visible').toggle();
	if ($(a).hasClass('visible')){
		$(this).text("Свернуть");
	} else 	$(this).text("Развернуть");
        return false;
    });

Форум

Справочник

Discord чат

Курсы javascript