Jquery & HTML：根据 jquery 手风琴面板中的用户输入填充文本字段？

Question

首先，我是 HTML 和 jquery 的新手。

我有以下 HTML 代码和 jquery 手风琴下拉菜单代码。我正在尝试以下功能：如果用户想要编辑问题，编辑后的问题应该出现在顶部文本字段的 'Enter Question' 字段中。

代码如下：

<!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>
  <link rel="stylesheet" href="/resources/demos/style.css">


  <script>
  $(function() {
    $("#accordion").accordion();
    $(":button").click(function(){
    var text = $("#123").val();
    <!--var text = $('[name = "question"]').text();-->
    $("#input").val(text);
    });
  });
  </script>
</head>
<body>

<title> UI </title>

<center>
<form id="myform">
    <label>Enter Question:</label>
    <input id="input" type="text" name = "questions"/>
    <br><br>
    <input id = "submitbutton" type="submit" value="Submit"/>
</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 id="123" type="text" name = "question" />
            <br><br>
            <input type = "button" id = "edit1" 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 id="in1" type="text"/>
            <br><br>
            <input type = "button" id = "edit2" value = "Edit" ></input>
            </form>
    </div>

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

我可以使用手风琴面板中文本字段的唯一 ID 来实现功能（如上所述）。

我可以为第一个面板执行此操作，但我必须使用特定的 ID（“#123”）。如果我想为更多面板执行此操作，我不想编写 jquery 代码并为每个面板的每个文本字段创建唯一 ID。我希望每个面板中的每个“编辑”按钮都能正常工作。

我的问题是，如何使用通用属性执行此操作，以便在手风琴的任何面板中按下编辑按钮时，该特定面板中的特定文本字段将传递到主要问题文本字段？

谢谢

Answer 1

您可以在 DOM 中搜索您的输入字段，而不是使用 ID：

例如：

var text = $(this).siblings("input[type=text]").val();

this returns 到你点击的按钮，siblings 是你输入的地方。

Jquery & HTML：根据 jquery 手风琴面板中的用户输入填充文本字段？

Jquery & HTML: Populating a text field from user input in jquery accordion panels?

html

tags

jquery

attributes

accordion