单击后将标题文本动态放入文本区域

Question

基本上我有一个按钮，点击后我想在选择列表中自动选择主题（它确实如此）并获取 h3 和 h5 文本并将其放入 textarea。

这是我的代码：

$('.order-button').click(function(){
   var productName = $('.product-name').text();
   var productSerial = $('.product-serial').text();

   $('#msgsubject').val($(this).data('val')).trigger('change'); // choosing subject         
   $('#message').val($('#message').val()+" "+productName+" "+productSerial+" "); // putting text into textarea
})

似乎工作正常，但是当我有两个产品并且我单击第一个产品上的“订购”按钮时，它会从其中两个产品发送文本，而第二个产品上的第二个按钮什么也不做。

[编辑] 对不起 - 第二个和第一个做同样的事情。就像评论中提供的小提琴一样。

我相信我只需要添加一些东西来告诉 jquery 一个按钮单击是针对一种产品的，它应该只从该产品中获取“名称”和“序列号”，这不好吗？但我不是 jquery ninja，我找不到解决方案，这让我抓狂；/请帮忙。

Answer 1

它发送给你是因为类名相同，而你没有指定使用哪一个。

这是更新后的小提琴：http://jsfiddle.net/02gqLq89/19/

$('.order-button').click(function(){

    var productSerial =  $(this).prev('.product-serial');
    var serialtext = productSerial.text();
    var productName = $(productSerial).prev('.product-name').text();

    $('#msgsubject').val($(this).data('val')).trigger('change'); // choosing subject         
    $('#message').val($('#message').val()+" "+productName+" "+serialtext+" "); 
 })

这是新代码。如您所见，我使用它来捕获我单击的按钮，然后我使用 .prev 捕获前一个 .product-serial 并获取其文本，然后在 .product-serial 上使用另一个 .prev 捕获产品名称并获取其文本文本。

您的错误是您捕获了所有 .product-serial 和 .product-name 而不仅仅是预期的

您也可以使用 .siblings 代替 .prev

$('.order-button').click(function(){
    var productSerial =  $(this).siblings('.product-serial').text();
    var productName = $(this).siblings('.product-name').text();

    $('#msgsubject').val($(this).data('val')).trigger('change'); // choosing subject         
    $('#message').val($('#message').val()+" "+productName+" "+productSerial+" "); 
})

工作小提琴：http://jsfiddle.net/02gqLq89/23/