Jquery 手风琴：在动态创建的面板中填充文本字段答案

【问题标题】：Jquery accordion: populating text fields in dynamically created panelsJquery 手风琴：在动态创建的面板中填充文本字段
【发布时间】：2015-12-15 06:06:00
【问题描述】：

然后我想在 jquery 手风琴模型中填充动态创建的手风琴面板的字段。该字段将填充来自主要问题字段的信息。我可以使用 jquery 函数创建动态面板，但是在如何使用程序中主文本字段中的数据填充面板字段时遇到了麻烦（在顶部

我可以做相反的事情，即点击“编辑”按钮用面板字段填充主字段。

这是输出：https://jsfiddle.net/0fysejrh/1/

我的代码如下：

<!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 = 3;
  $(function() {
    $("#accordion").accordion({
        collapsible: true,
        active: false,
        });
    collapsible: true;

    function edit(){
    var text = $(this).siblings("input[type=text]").val();
    var sql = $(this).siblings('textarea').val();
    $("#input").val(text);
    }
    $(":button").click(edit);

    $("#addAccordion").click( function() {
        var newDiv = '<div><h3>Question '+ counter +'</h3></div>';
        var content = '<div class = "new_panel"><label for="in" name="question">Edit Question:</label> <input type="text" name = "question" /><br><br>' +
        '<br><br> <input type = "button" value = "Edit" ></input></div>';
        $("#accordion").append(newDiv +content) ;
        $("#accordion").accordion("refresh");
        $(".new_panel").children("input[type=text]").val()==$("#input").val();

        counter++;
        $(":button").click(edit);
    });
  });
  </script>
</head>
<body>

<center>
<form id="myform">
    <label>Enter Question:</label>
    <input id="input" type="text" name = "questions"/>
    <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>
            How many times a day do you take ventolin ?
            <br><br>

            <label for="in" name="question">Edit Question:</label>
            <input type="text" name = "question" />

            <br><br>
            <input type = "button" value = "Edit" ></input>

            </form>
    </div>
    <h3> Question 2 </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>
            <input type = "button" value = "Edit" ></input>
            </form>
    </div>

</div>
</body>
</html>

问题是下面这行代码不起作用：

$(".new_panel").children("input[type=text]").val()==$("#input").val();

其中“.new_panel”是我动态创建的类名，“#input”是主文本字段的唯一 ID。

我尝试使用类 i.d.的新面板，但这似乎不起作用。有人能指出我正确的方向吗？

【问题讨论】：

标签： jquery html tags field accordion

【解决方案1】：

您可以做的是将输入的值保存在一个变量中，然后将其作为newDiv的一部分输入

var inputVal = $("#input").val();
var newDiv = '<h3>Question '+ counter +'</h3>';
var content = '<div class = "new-panel"><label for="in" name="question">Edit Question:</label> <input type="text" name = "question" value="'+inputVal+'" /><br><br>'+ '<br><br> <input type = "button" value = "Edit" ></input></form></div>';
$("#accordion").append(newDiv +content) ;
$("#accordion").accordion("refresh");
counter++;
$(":button").click(edit);

你也使用 == 你必须记住这是一个比较而不是一个赋值运算符

https://jsfiddle.net/nyye5bmg/

【讨论】：