在 onClick 函数中添加字符串参数到函数？答案

【问题标题】：Add string parameter to function in onClick function?在 onClick 函数中添加字符串参数到函数？
【发布时间】：2014-05-25 17:09:47
【问题描述】：

我有一个带参数的 onclick 函数。例如，我想在警报中显示此参数。我怎样才能给一个参数？像这样的：

<img id="imgPerson" src="_#=itemImg=#_" width="200" height="200" onclick="SetDetailInfo('test value 123')"/>

function SetDetailInfo(myCustomParam) {
    alert(myCustomParam);
}

更新上面的代码工作正常。但是我不想给函数一个固定的参数。我想让它动态化。下面的代码有效。您会看到一些名为“#= line2 =#”的变量打印在 div 中。这有效并显示了一些字符串运行时。我想将该变量的值作为参数添加到函数中。

<img id="imgBestuurderFoto" src="_#=itemDate=#_" width="200" height="200" onclick="SetDetailInfo('test 123')" style="padding:0 !important;margin:0 !important;border:0 !important;" />

       <div class="cbs-Line2" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_" style="display:block;" >_#= line2 =#_</div>

这是带有变量的 javascript：

var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_2lines_");
var line2 = $getItemValue(ctx, "IntroText");
line2.overrideValueRenderer($contentLineText);
var line2Id = encodedId + "line2";

【问题讨论】：

应该可以的，你试过了吗？ jsFiddle
确保在 html 之前链接 JS。
@GaurangTandon，这不是必需的，也不是标准。事实上，很多时候你可能想要延迟加载 JS，直到页面的其余部分被加载（延迟），这样页面渲染就不会延迟。
@BartPlatak 哦，对不起。我在 JSFiddle 加载的 JS 代码和 script 标签之间感到困惑。感谢您通知我。
你没事。这行得通。请参阅更新以了解确切的问题..

标签： javascript jquery parameter-passing

【解决方案1】：

我特别喜欢在元素中使用data-attributes 来分发信息，试试这个：

<img id="imgPerson" src="_#=itemImg=#_" 
     width="200" height="200" data-test-attr="test value 123"/>

在js中

$("#imgPerson").click(function(e){
     alert($(this).data("test-attr"));
});

【讨论】：

使用 DOM 元素中的数据属性来分发与表示不直接相关的信息，这违反了关注点分离原则，并且通常会导致意大利面的灾难。通常，单击元素应根据上下文向支持该元素的对象发送命令。通常，您的代码应该有一个单一的事实来源，而不应该是表示层。稍后查询表示以获取逻辑信息和应用程序状态很快就会成为维护的噩梦，尤其是随着代码库的增长。
@BenjaminGruenbaum 感谢您的建议，我以后会考虑的。我通常使用 data-attributes 来分发代码和一些基本参数等信息。我个人建议使用它们，但要适度。
考虑阅读更多关于关注点分离和帮助您的设计模式的信息。 Fowler 的UI archs 架构是一个不错的起点。使用 data-attributes 来传递 presentation only 信息（无业务逻辑）或绑定是完全可以的。
@BenjaminGruenbaum 看看这些使用数据属性的示例（get-and-set-data 和 sjs

【解决方案2】：

这可以正常工作，但是您应该在标记之外不显眼地绑定您的事件处理程序，这样您就不必对该字符串进行硬编码：

var someValue = "Test 123"; //This could be dynamic
var img = document.queryselector('#imgPerson');
img.addEventListener('click', function(e){
     SetDetailInfo(someValue);
});

function SetDetailInfo(myCustomParam) {
    alert(myCustomParam);
}

【讨论】：