JavaScript / jQuery:记录单击的元素以将其保存到MySQL-DB

Question

我想对两组按钮(anker元素(进行小型调查。当用户在第1组中做出决定时，将显示第2组，并在第二个决定之后，单击按钮的值应写入MySQL数据库。

我分别在JavaScript上有一些问题。

如何协议每个组中的每个单击按钮？

https://jsfiddle.net/v2mtze2h/2/

您可以找到一个小例子。

我知道这一事实是，在这种状态下它无法正常工作，但是我真的不知道，这两个按钮之间如何有所不同。

当我使用

识别第一个单击按钮时

    firstclick = this.ad;

我不能使用

this.ad

第二组。

预先感谢。

问候Lars

Answer 1

考虑使用数组在选择时存储单击ID。

请参阅此小提琴：

https://jsfiddle.net/v2mtze2h/4/

var clickedControlsOrder = [];
$(document).ready(function(){
    $("a").click(function(){
        $("#second").removeClass("hidden").addClass("visible");
        $("#first").addClass("hidden");
        clickedControlsOrder.push($(this).prop('id'));
        $('.info #info1').html(clickedControlsOrder.join(','));
    });
});

您可以将数组更改或通过迭代数组来存储它们，以将它们存储在表/数据库中。

Answer 2

可以使用数据属性，并执行类似于父容器上的设置组属性和每个按钮上的项目编号

$('a').click(function(e){
   e.preventDefault();
   var $el = $(this), 
   group = $el.closest('[data-group]').data('group'),
   item = $el.data('item');
   console.log( 'Button:', group + '.'+ item)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="second" data-group="2">
  <span><a href="#" data-item="1">Button 2.1</a></span>
  <span><a href="#" data-item="2">Button 2.2</a></span>
  <span><a href="#" data-item="3">Button 2.3</a></span>
 </div>