Jquery 动态手风琴：面板标题颜色仅适用于新添加的面板？

Question

我有一个动态 jquery 手风琴。我在顶部有 2 个字段。在两个字段都被填满并且用户按下 "add question button" 之后，一个新面板将添加到顶部并带有蓝色标题。随着我不断添加问题，越来越多的面板被添加到前面，它们的标题也是蓝色的。我在我要添加面板的 jquery 部分添加了蓝色标题的代码。

我还有一个提交按钮，它会刷新页面并 returns 页面恢复到默认状态（因此所有以前的面板都丢失了）。

这是输出：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="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://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>

我不知道如何使用我当前的代码执行此操作。

我正在考虑以某种方式遍历手风琴面板并找到添加的最新面板，尽管我不知道该怎么做。

任何人都可以指出正确的方向或对如何解决这个问题有任何建议吗？

Answer 1

改变一些jquery

var newDiv = '<div style="background:lightblue;"><h3 style="margin:2px 0 0;">Question '+ counter +'</h3></div>';

https://jsfiddle.net/5gLb0cqx/2/

Answer 2

demo

假设每个面板的标题中只有 h3，只需在 jQuery

中添加一行

$("#accordion").find("h3").not(":first").css({"background":"none"})

添加新面板后，或

$("#accordion").find("h3").css({"background":"none"})

在前置之前。

Jquery 动态手风琴：面板标题颜色仅适用于新添加的面板？

Jquery dynamic accordion: panel heading colour only with newly added panel?

jquery

html

styles

selector

jquery-ui-accordion