У меня есть динамический аккордеон jquery. У меня есть 2 поля вверху. После того, как оба поля заполнены и пользователь нажимает «кнопку добавления вопроса», вверху добавляется новая панель с синим заголовком. По мере того, как я продолжаю добавлять вопросы, появляется все больше и больше панелей, а их заголовки также выделяются синим цветом. Я добавил код для синих заголовков в свой раздел jquery, где я добавляю свои панели.
У меня также есть кнопка отправки, которая обновляет страницу и возвращает страницу по умолчанию (поэтому все предыдущие панели теряются).
Вот результат: https://jsfiddle.net/5gLb0cqx/
Мой вопрос таков: я пытаюсь сделать так, чтобы только вновь добавленная панель имела синий заголовок.
мой код выглядит следующим образом:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
var counter = 2;
$(function() {
$("#accordion").accordion({
collapsible: true,
active: false,
});
function edit(){
var text = $(this).siblings("input[type=text]").val();
var sql = $(this).siblings('textarea').val();
$("#input").val(text);
$("#sql_code").val(sql);
}
$(":button").click(edit);
$("#addAccordion").click( function() {
var inputVal = $("#input").val();
var sqlVal = $("textarea#sql_code").val();
if (!sqlVal || !inputVal){
return;
}
var newDiv = '<div><h3 style = "background:lightblue;">Question '+ counter +'</h3></div>';
var content = '<div class = "new_panel"><label>'+inputVal+'</label><br><br><label for="in" name="question">Edit Question:</label> <input type="text" name = "question" value ="'+inputVal+'" /><br><br>'
+ ' <label name="SQL">Edit SQL code here:</label><textarea name = "code">'+sqlVal+'</textarea>' +
'<br><br> <input type = "button" value = "Edit" ></input></div>';
$("#accordion").prepend(newDiv +content) ;
$("#accordion").accordion("refresh");
counter++;
$(":button").click(edit);
});
});
</script>
</head>
<body>
<center>
<form id="myform">
<label>Enter Question:</label>
<input id="input" type="text" name = "questions"/>
<br><br>
<label>Enter SQL code here:</label>
<textarea id="sql_code" name = "SQL_code"></textarea>
<br><br>
<input id = "submitbutton" type="submit" value="Submit"/>
<input type = "button" id ="addAccordion" value = "Add Question" ></input>
</form>
</center>
<div id = "accordion">
<h3> Question 1 </h3>
<div>
<form>
Have you ever been tested for an STI?
<br><br>
<label for="in" name="question1">Edit Question:</label>
<input type="text"/>
<br><br>
<label for="sql" name="SQL">Edit SQL code here:</label>
<textarea></textarea>
<br><br>
<input type = "button" value = "Edit" ></input>
</form>
</div>
</div>
</body>
</html>
Я не знаю, как это сделать с моим текущим кодом.
Я думал каким-то образом перебрать панели аккордеона и найти самую новую добавленную панель, хотя я понятия не имею, как это сделать.
Может кто-нибудь может указать мне в правильном направлении или есть какие-либо предложения относительно того, как решить эту проблему?
