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

【问题标题】：How do I input data attribute values with multiple classes to a div after button click?单击按钮后，如何将具有多个类的数据属性值输入到 div？
【发布时间】：2017-08-22 21:56:07
【问题描述】：

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

但是data属性在同一个类中，总共有12个类。

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

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

【问题讨论】：

不确定我是否完全理解，但如果你想在你所在的容器中添加一些东西，你可以使用$(this).closest(classname)，或者如果它是你点击$(this)的地方

标签： javascript jquery html css custom-data-attribute

【解决方案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>

【讨论】：