时间戳

首页 > 解决方案 > 使用jQuery将文本从最近的元素复制到字段中

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

问题描述

我有一系列产品可以通过如下标记获得输出：

<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());
});

阿努的帮助会很糟糕。

标签： jquery

解决方案

问题是因为您的逻辑是从所有.title元素中选择文本。相反，您需要遍历 DOM 以读取与单击的.title相关的文本。.enquire为此，您可以使用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>

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

推荐阅读