如何从元素的 href 属性动态更改 javascript 调用的参数答案

【问题标题】：How to dynamically change a parameter of a javascript call from the href attribute of an element如何从元素的 href 属性动态更改 javascript 调用的参数
【发布时间】：2013-06-30 23:59:53
【问题描述】：

有没有办法动态更改从 html 元素传递给 javascript 函数的参数？例如，假设我有以下内容：

<a id="myElement" href="javascript:myFunction('myParam');">Click me!</a>

如何将“myParam”更改为另一个参数，例如“myParam2”？使用 javascript 或 jquery 的答案对我来说很好。为简单起见，请随意假设我可以通过 document.getElementById('myElement') 或其他方式找到此元素。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我会做的是绑定一个点击处理程序并使用this 来确定哪个被点击了。

$('#myElement').click(function () {
    console.log($(this).text()); // Should dump "Click me!" to the console.
});

然后您可以向链接添加属性，例如 data-someParam="my value" 并使用 .attr() 访问它们。

【讨论】：

您也可以访问 data-* 属性为 .data() 但是该函数会尽最大努力将值转换为 js 类型，因此使用它取决于您处理的值类型 - 0 填充数字有时是一个明显的混淆点
@prodigitalson，很高兴知道！我不知道有这样的方法存在。
我实际上已经有一个这样的处理程序，它可能工作得很好。但是，我有一个小问题，因为我不提前知道参数（它们是通过 jinja2 从 Python 后端传入的）。我想我可以将它们存储在隐藏字段中，并通过处理程序访问这些字段......？除非有更好的方法。
@TonyWickham，无论哪种方式，将值设置为元素的属性。不管你是在客户端还是服务器端。
请记住，使用 data() 访问 data-* 将强制名称为小写，因此您将使用 data("someparam") 而不是 data("someParam") 访问 data-somParam！

【解决方案2】：

要完成你想要的，你可以这样做

var ChangeParam = function(el,newParam) {
    //make sure things aren't broken:
    if(typeof el !== 'undefined' && el.href && typeof newParam !== 'undefined') {
        var parta = el.href.split('(')[0] + '('; //get the stuff before the param
        var partb = ')' + el.href.split(')')[1]; //get the stuff after the param
        el.href = parta + '"' + newParam + '"' + partb; //put it all together
    } else { return false; }
}

ChangeParam(document.getElementById('myElement'),'meow');

示例：http://jsfiddle.net/q7R9B/2/

编辑：我把它做成了一个漂亮的函数，万岁！

【讨论】：

这看起来会做我想要的。但是，我相信如果参数中包含 ' 它将失败（因为它将被拆分）。就像如果我的参数是'我说'tomato''你说'tomato''，它会被拆分成多个参数，对吧？
+1 用于回答我最初提出的问题。我希望我能接受两个答案，但我不得不选择布拉德的答案，因为它看起来更稳定/更好的做法。
另外，作为对未来读者的提醒，这只有在你有一个参数时才有效（就像我的问题一样）。如果您有多个，您可能需要考虑另一个答案。
@TonyWickham 我可能只是通过并添加对多个参数的支持哈哈，是的，很公平:)

【解决方案3】：

应该也可以用这个：

document.getElementById('myElement').href = "javascript:myFunction('myParam2');"

干杯，LC

【讨论】：