如何使用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>

Answer 2

您可以通过以下操作获取元素(然后是它的数据):

HTML:

    <button class="btn" data-somedata="whatever">Street</button>

JS:

    $("body").on("click tap", ".btn", function(event) {
      var $target = $(event.target);
      var somedata = $target.data("somedata");
    });

希望有帮助=)

Answer 3

HTML按钮定义:

<button class="btn" id="btn">Street Name</button>

JQuery代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
    $(document).ready(function() {
        $('#btn').on('click', storeData);   
    });
    function storeData() {
        alert ("here check value1, value2, value3");        
        location.href='map.html';
    }   
</script>

Answer 4

对我来说，最好的答案是Elias Nicolas给出的，但略有修改。罗布·佩里的解决方案看起来似乎也会起作用，但正如他们所说——如果它没有坏，就不要修理它。SkyMaster的解决方案并没有解释我如何从html代码到javascript中获取变量——我有数百个按钮，每个按钮都有不同的变量要传递给脚本。此外，因为我有数百个按钮，我不能使用id="btn"。我只使用了button。

最终结果如下:-

$(document).ready(function() {
    $('button').on('click tap', function (e) {
     alert("Your values are :"+ $(this).data("value1")+","+$(this).data("value2")+","+$(this).data("value3"));        
    });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-value1="1" data-value2="2" data-value3="3">Street Name</button>