Question

假设我在文档中准备了一个函数。

$(document).ready(function()
{ 
    function myFunction(id) {
        alert(id);
    };
})

我想从锚标记中传递一个参数。

<a href="javascript:void(0)" onclick="myFunction(1)">Item 1</a>
<a href="javascript:void(0)" onclick="myFunction(2)">Item 2</a>
<a href="javascript:void(0)" onclick="myFunction(3)">Item 3</a>

我知道myFunction不在全局范围内。这就是为什么它将无法正常工作的原因。那么有什么方法可以将锚标签中的参数传递给文档内部的函数？

Answer 1

尝试使用jQuery事件绑定。

$(document).ready(function()
{ 
    function myFunction(id) {
        alert(id);
    };
    
    $(document).on("click", "a", function(event) {
      var arg = $(this).attr("data-arg");
      myFunction(arg);
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" data-arg="1">Item 1</a>
<a href="javascript:void(0)" data-arg="2">Item 2</a>
<a href="javascript:void(0)" data-arg="3">Item 3</a>

Answer 2

不需要将函数放在document.ready中，仅当您需要从DOM中获取元素以供选择器找到它时才需要。

因此，要么忽略它，要么以正确的方式进行操作，并分配一个事件侦听器和处理程序。要传递<a>中不同的内容，例如，您可以使用数据属性。

$(document).ready(function()
{ 
    $('a').on('click', function(e) {
      e.preventDefault();
      console.log($(this).data('foo'));
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" data-foo="1">Item 1</a>
<a href="javascript:void(0)" data-foo="2">Item 2</a>
<a href="javascript:void(0)" data-foo="3">Item 3</a>

如何将锚点onclick中的参数传递给document.ready中的函数

2 个答案: