Question

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

但是，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);
})

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？

1 个答案: