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

Question

我想要实现的是根据用户所做的选择，基于数据属性附加一个带有附加文本值的段落标记。

但是，数据属性在同一个class内，一共有12个这样的class。

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

代码笔：https://codepen.io/aahlfeeyann/pen/dzejOg

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

Answer 1

将您的变量移动到 click 函数内部，并使用 $(this) 获取点击元素的数据属性。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

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

How do I input data attribute values with multiple classes to a div after button click?

html

javascript

css

jquery

custom-data-attribute

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

How do I input data attribute values with multiple classes to a div after button click?

html

javascript

css

jquery

custom-data-attribute

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