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

Question

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

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

目前，按钮点击在 html 中由 onClick 函数处理，但它在某些触摸屏设备上不起作用。所以我想改用 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

您可以通过执行以下操作来获取元素（及其数据）：

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 2

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 3

如果我理解正确的话，您需要使用 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 4

对我来说，最佳答案是 Elias Nicolas 给出的，但略有修改。 Rob Perry 的解决方案看起来好像也行得通，但正如他们所说——如果它没有坏，就不要修复它。 SkyMaster 的解决方案没有解释我如何将变量从 html 代码获取到 javascript - 我有数百个按钮，每个按钮都有不同的变量要传递给脚本。另外，因为我有数百个按钮，所以我不能使用 id="btn"。相反，我只是使用了按钮。

最终的解决方案如下图：-

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

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

How to implement onClick function with parameters using jquery

jquery

onclick

event-handling