Javascript 如何在单击按钮后将具有多个类的数据属性值输入到div？

我试图实现的是根据用户基于数据属性所做的选择，在段落标记中添加一个文本值

但是，数据属性在同一个类中，这些类总共有12个

如何区分单击按钮时的多个值

代码笔：

1A
1B
1C
1D
2A
2B
2C
二维
3A
3B
3C
三维
//要预览的消息
var buttonMessage=$（'.btn卡'）。数据（'消息'）；
$（'.btn卡'）。单击（函数（）{
控制台日志（按钮消息）；
$（'#messageOne'）。追加（按钮消息）；
})

将变量移动到

单击

函数中，然后使用

$（this）

获取单击元素的数据属性

$（'.btn卡'）。单击（函数（）{
var buttonMessage=$（this.data（'messages'）；
控制台日志（按钮消息）；
$（'#messageOne'）。追加（按钮消息）；
})

1A
1B
1C
1D
2A
2B
2C
二维
3A
3B
3C
三维

将变量移动到

单击

函数中，然后使用

$（this）

获取单击元素的数据属性

$（'.btn卡'）。单击（函数（）{
var buttonMessage=$（this.data（'messages'）；
控制台日志（按钮消息）；
$（'#messageOne'）。追加（按钮消息）；
})

1A
1B
1C
1D
2A
2B
2C
二维
3A
3B
3C
三维

我不确定我是否完全理解，但是如果您想在您所在的容器中附加内容，可以使用

$（this）.最近（classname）

或者如果它是您单击的位置

$（this）

我不确定我是否完全理解，但是如果您想在容器中附加内容，可以使用

$（this）.最近（classname）

或者如果是针对您单击的位置（

$）（此）

<div class="container q1">
    <div class="row"><button class="btn btn-card" data-messages="1A">1A</button></div>
    <div class="row"><button class="btn btn-card" data-messages="1B">1B</button></div>
    <div class="row"><button class="btn btn-card" data-messages="1C">1C</button></div>
    <div class="row"><button class="btn btn-card" data-messages="1D">1D</button></div>
</div>
<div class="container q2">
    <div class="row"><button class="btn btn-card" data-messages="2A">2A</button></div>
    <div class="row"><button class="btn btn-card" data-messages="2B">2B</button></div>
    <div class="row"><button class="btn btn-card" data-messages="2C">2C</button></div>
    <div class="row"><button class="btn btn-card" data-messages="2D">2D</button></div>
</div>
<div class="container q3">
    <div class="row"><button class="btn btn-card" data-messages="3A">3A</button></div>
    <div class="row"><button class="btn btn-card" data-messages="3B">3B</button></div>
    <div class="row"><button class="btn btn-card" data-messages="3C">3C</button></div>
    <div class="row"><button class="btn btn-card" data-messages="3D">3D</button></div>
</div>

// Message to Preview
var buttonMessage = $('.btn-card').data('messages');
$('.btn-card').click(function(){
    console.log(buttonMessage);
    $('#messageOne').append(buttonMessage);
})