如何使用jQuery实现带参数的onClick功能

Question

我有一个网页，可用于在街道地图上突出显示我当地的街道。用户单击他们要查找的街道名称，该街道就会在地图上突出显示。有关工作示例，请参见http://www.fastmap.eu。

每个街道名称都显示为一个按钮，当用户单击按钮时，将存储3个变量以供在地图中使用。

当前，onClick函数使用html处理按钮单击，但是在某些触摸屏设备上不起作用。所以我想改用jQuery .on（'click tap'，function（），但是不知道如何传递变量。

每个按钮的html看起来都与此类似：

    <button class="btn" onClick="storeData(value1,value2,value3);location.href='map.html';">Street Name</button>

以前类似性质的答案解释了如何将参数从脚本函数传递给另一个，而不是从html代码传递，并且不显示如何在html中实现。

Answer 1

如果我正确理解，则需要使用jQuery.data（）例如：您可以为html中的函数设置不同的值。希望能帮助到你。

请参阅以下代码段：

$(document).ready(function() {
    $('#btn').on('click', function (e) {
     alert("Your values are :"+ $(this).data("value"));        
    });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" data-value="1">Street Name</button>