Ошибка в не большом скрипте
Приветствую!
Есть список полей, которые формируются динамически, нужно было сделать выборку этих полей, но не всех подряд, а "от" и "до" выбранного идентификатора. Затем скрывать/показывать эти элементы по клику. Я это сделал, на сколько хватило знаний, но проблема в том что, я добавляю "текст" после определенного индентификатора, чтобы по клику на тексте происходило скрытие/раскрытие полей, но этот текст после второго клика пропадает. Для наглядности выложил в песочницу, кликните на слово "тест", выделено красным. Объясните пожалуйста как решить? |
<!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 |
Спасибо, из соседней темы нашел решение и адаптировал.:write:
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;
});
|
| Часовой пояс GMT +3, время: 13:13. |