2017-04-24 51 views
0

我想用两组按钮(Anker元素)做一个小调查。 当用户在组1中做出决定时,组2将被显示,并且在第二次决定后,被点击的按钮的值应该被写入到MySQL数据库中。Javascript/JQuery:记录点击的元素将它们保存到MySQL-DB以后

我对JavaScript分别有一些问题JQuery。

如何协议每个组中的每个点击按钮?

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

你可以找到一个小例子。

我知道这个事实,在这种状态下它不能工作,但我真的不知道,如何区分两组按钮。

当我识别使用

firstclick = this.ad; 

第一点击的按钮我不能使用

this.ad 

为第二组。

在此先感谢。

问候 拉尔斯

+0

第一件事就是用独特的'id'标签来考虑。 –

+0

id's ahve是唯一的。您可以在每个列表中重复使用ID 1,2和3。尝试使用像1-1,1-2,1-3,2-1,2-2和2-3这样的东西,所以你有独特的ID,因此你的逻辑不能正常工作。 – Shilly

回答

0

考虑使用数组作为选择它们来存储被点击的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(',')); 
    }); 
}); 

您可以接着修改该数组或通过遍历数组将它们存储在表/数据库中,无论您想要什么方式。

+0

也 - 我改变了你的ID略有..你的问题的意见是正确的 - 重复的ID是一个很大的禁忌。 –

0

可以使用数据属性和做一些像上的每个按钮设定父容器的属性组和项目数量

$('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>

相关问题