jquery - 使用 jQuery 将文本从最近的元素复制到字段中

Question

我有一系列产品可以使用如下标记输出:

<div class="product">
    <p class="title">Product 01</p>
    <span class="enquire">Enquire</span>
</div>

<div class="product">
    <p class="title">Product 02</p>
    <span class="enquire">Enquire</span>
</div>

<div class="product">
    <p class="title">Product 03</p>
    <span class="enquire">Enquire</span>
</div>

...以及同一页面上的一个带有 H3 和此隐藏字段的表单...

<form>
    <h3></h3>
    <input type="hidden" id="help" name="help" value="" />
</form>

我想做的是，例如，如果您单击任何产品的“查询”，产品标题将被复制到 H3 标记中的表单中，并且也会复制到“帮助”隐藏字段值中。

我尝试这样做，但它并没有按预期工作:

$('.enquire').click(function() {
    $('form h3').text($('.title').text());
    $('form #help').val($('.title').text());
});

Anu 的帮助会很好。

Answer 1

问题是因为您的逻辑是从所有 .title 元素中选择文本。相反，您需要遍历 DOM 来读取与单击的 .enquire 相关的 .title 文本。为此，您可以使用 siblings()，如下所示:

$('.enquire').click(function() {
  var title = $(this).siblings('.title').text();
  $('form h3').text(title);
  $('form #help').val(title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <p class="title">Product 01</p>
  <span class="enquire">Enquire</span>
</div>
<div class="product">
  <p class="title">Product 02</p>
  <span class="enquire">Enquire</span>
</div>
<div class="product">
  <p class="title">Product 03</p>
  <span class="enquire">Enquire</span>
</div>
<form>
  <h3></h3>
  <input type="text" id="help" name="help" value="" />
</form>

请注意，我将隐藏字段更改为在此演示中可见，其他逻辑是相同的。