javascript - 如何在 Bootstrap Accordion 中选择值

Question

我有一个 Accordion ，里面有一个表格。单击每个折叠面板内的按钮时，它会检索同一折叠面板的 title 和 query 内容。

https://jsfiddle.net/rkdrfj4y/3/这是我正在尝试做的事情的演示。

问题是第一个 Accordion 总是返回未定义的 form input 值。所有其他后续 Accordion 都返回预期值。我不明白这是怎么发生的，因为每个 Accordion 使用相同的 js 代码。

HTML

<form>
  <div class="form-group">
    <label for="exampleTextarea">Global Templates</label>
    <div class="panel-group" id="accordion-global">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
                            <a class="title-anchor" data-toggle="collapse"
                               data-parent="#accordion-global" href="#collapse-global-0">
                                title</a>
                        </h4>
        </div>
        <div id="collapse-global-0" class="panel-collapse collapse">
          <div class="panel-body">
            <form class="query-form">
              <div class="form-group">
                <label for="template-title">Template Title</label>
                <input type="text" class="form-control template-title" name="template-title" value="title">
              </div>
              <div class="form-group">
                <label for="template-query">Template Query</label>
                <textarea class="form-control template-query" name="template-query" onkeyup="textAreaAdjust(this)">query</textarea>
              </div>
            </form>
            <input class="query-id" type="hidden" value="_id">
            <button class="btn btn-info apply-template-btn">Save
            </button>
          </div>
        </div>
      </div>
            <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
                            <a class="title-anchor" data-toggle="collapse"
                               data-parent="#accordion-global" href="#collapse-global-1">
                                title</a>
                        </h4>
        </div>
        <div id="collapse-global-1" class="panel-collapse collapse">
          <div class="panel-body">
            <form class="query-form">
              <div class="form-group">
                <label for="template-title">Template Title</label>
                <input type="text" class="form-control template-title" name="template-title" value="title">
              </div>
              <div class="form-group">
                <label for="template-query">Template Query</label>
                <textarea class="form-control template-query" name="template-query" onkeyup="textAreaAdjust(this)">query</textarea>
              </div>
            </form>
            <input class="query-id" type="hidden" value="_id">
            <button class="btn btn-info apply-template-btn">Save
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
</form>

JS

$('.apply-template-btn').click(function (e) {
e.preventDefault();

let id = $(this).siblings('.query-id').val();
let title = $(this).siblings('.query-form').find('.template-title').val();
let query = $(this).siblings('.query-form').find('.template-query').val();

console.log([id,title,query])
alert(title)    //undefined for first accordion but works for all other subsequent accordions

$.post('/api/database/query_template/update', {id,title,query}, function (data) {
    console.log(data)   
})
});

Answer 1

更改以下现有行:

let title = $(this).siblings('.query-form').find('.template-title').val();
let query = $(this).siblings('.query-form').find('.template-query').val();

至

let title = $(this).parent().find(".template-title").val();
let query = $(this).parent().find(".template-query").val();