如何在没有 onclick 属性的帮助下在 jQuery 函数中传递值？

Posted 2023-02-25

【中文标题】如何在没有 onclick 属性的帮助下在 jQuery 函数中传递值？

【英文标题】：How to pass value in a jQuery function without the help of onclick attribute?

【发布时间】：2018-01-03 04:25:24

【问题描述】：

我遇到了一个问题，我需要将一个或多个参数传递给javascript 函数。例如

<a href="#" OnClick="Delete(1,'q');" > X </a>
<a href="#" OnClick="Delete(2,'u');" > X </a>

但我试图从 html 端避免这个 onclick 属性。所以我一直用这种方式

<a  href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a>
<a  href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a>
<a  href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>

并像这样编写jQuery函数来从链接中捕获我的点击函数

$("#actRemove").each(function() 
   $(this).on("click", function () 
      alert($(this).data("action"));
   );
);

但是唉！！我完蛋了。此链接仅适用于第一个锚Delete1 没有一个锚在工作。这是我的jsFiddle 链接。我已经阅读了这些答案Q1、Q2、Q3、Q4、Q5、Q6。这些问题中的每一个都有使用onclick 的第一种方式的解决方案，并将参数传递给函数。我的想法不同。此外，我的另一个问题是，有什么方法可以将参数传递给jQuery function 而无需在html 属性中写入onclick？ 我知道jQuery 函数能够接收参数，但是如何从html端将其发送到函数？

【问题讨论】：

所有元素都必须有唯一 ID

在每个锚点中使用相同的类而不是使用 ids

@lazycoder ，所有锚标签都使用了相同的 id

Id 是唯一的，类可能是重复的。你应该为每三个锚标签提供相同的类，并在类而不是 id

上触发事件

【参考方案1】：

而不是id 使用class 选择器：-

HTML:-

<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>

jQuery:-

$(".actRemove").on("click", function () 
  alert($(this).data("action"));
);

工作演示：-

$(".actRemove").on("click", function () 
  alert($(this).data("action"));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>

注意：-

id在jQuery中用作unique-selector，而class用作group-selector

【参考方案2】：

你可以这样用

<a  href="javascript://" title="Delete" id="actRemove_1" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a>
<a  href="javascript://" title="Delete" id="actRemove_2" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a>
<a  href="javascript://" title="Delete" id="actRemove_3" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>



$("a[id^='actRemove_']").on("click", function () 
     alert($(this).data("action"));
)

【参考方案3】：

您可以直接在 javascript 中获取 HTML 对象的值，而无需使用 onclick 传递它：

var object_id = document.getElementById('object_id').value;