jquery - 如何使用jquery实现带参数的onClick函数

Question

我有一个网页，可用于在街道 map 上突出显示我所在区域的街道。用户单击他们正在寻找的街道名称，该街道就会在 map 上突出显示。请参阅http://www.fastmap.eu用于工作示例。

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

目前，按钮点击是通过 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>