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

时间:2019-04-02 08:11:10

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

Anu的帮助会很糟糕。

6 个答案:

答案 0 :(得分:3)

问题是因为您的逻辑是从所有.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>

请注意,在本次演示中,我将隐藏字段更改为可见,否则逻辑是相同的。

答案 1 :(得分:1)

使用此jquery:

import QuickLook
import UIKit

class PreviewController: QLPreviewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(true)
        guard let layoutContainerView = self.children.first?.view.subviews[1] as? UINavigationBar else { return }
        layoutContainerView.isHidden = true
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(true)
        guard let layoutContainerView = self.children.first?.view.subviews[1] as? UINavigationBar else { return }
        layoutContainerView.subviews[2].subviews[1].isHidden = true
        layoutContainerView.isHidden = false
    }
}

答案 2 :(得分:0)

您可以使用p这样的功能来读取同级prev()标签的文本:

$('.enquire').click(function() {
    var productName=$(this).prev("p").text()
    $('form h3').text(productName);
    $('form #help').val(productName);
});

答案 3 :(得分:0)

您的点击功能不知道使用哪个.title,因此您需要从点击中获取目标:

$('.enquire').click(function(e) {
    //var title = $(e.target).closest('.product').find('.title').text();
    // or
    var title = $(e.target).prev('.title').text();
    $('form h3').text(title);
    $('form #help').val(title);
});

答案 4 :(得分:0)

您的代码将所有.title元素的文本值连接在一起-只需获取单击元素的parent中包含的值即可:

$(".enquire").click(function() {
  $("form h3").text($(this).parent().find("p").text());
  $("form input").val($(this).parent().find("p").text());
  console.log($("form input").val());
});
<script src="https://code.jquery.com/jquery-3.3.1.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="hidden" id="help" name="help" value="" />
</form>

答案 5 :(得分:0)

您需要做的是将标题文本存储到变量中。由于您有n种产品,因此您还需要使用this。希望对您有帮助

$('.enquire').on('click', function() {
        var thisTitle = $(this).prev().text();
        console.log(thisTitle);
        $('form h3').text(thisTitle);
        $('form #help').val(thisTitle);
});

这里也是提琴手 https://jsfiddle.net/boilerplate/jquery