如何在 html 字符串中引用/添加 javascript 变量？答案

【问题标题】：How to quote/add javascript variable in html string?如何在 html 字符串中引用/添加 javascript 变量？
【发布时间】：2018-05-08 03:53:50
【问题描述】：

我试过这样用

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd('"+oData.id+"')' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

但事情是这样的：

<button class="btn btn-info btn-sm" onclick="viewskpd(" 00cc72988f8240428b25ac5327b2a3c6')'="" data-toggle="tooltip" title="" data-original-title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button>

但我不确定为什么触发 viewskpd() 的 onclick 函数不起作用。

我检查了控制台，它告诉我是这样的。

Uncaught SyntaxError: Invalid or unexpected token

为什么会这样？

【问题讨论】：

我认为您在+oData.id+ 周围的引号只需要单引号？所以('+oData.id+')
它使javascript变量像html @AJDEV

标签： javascript html onclick uncaught-exception

【解决方案1】：

oData.id 需要被引用，因此它是一个字符串，它被不同的引号引用而不是包含 onclick 属性：

onclick='viewskpd(\""+oData.id+"\")'

全文：

$($0).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd(\""+oData.id+"\")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

【讨论】：

好的，我已经编辑了关于您的答案的问题，但它仍然没有用
你能用\"" 和"\" 向我解释一下吗？第一次看到这种引用
@Gagantous，其实你需要更多地了解RegExp，找到一个好的来源并阅读它，在你的情况下你可以使用toString函数来避免复杂性。
这不是正则表达式@AmerllicA。它只是转义用于开始和结束字符串的引号字符：（'_\'_' 得到 _'_ 或 "_\"_" 得到 _"_）。还有一些其他特殊字符需要转义才能像换行符一样使用，\n。看看developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

您正在进入一些非常狂野的领域...脚本通过脚本注入到标记属性中，这些脚本最初可能位于标记语言本身的内部。不要这样做，这是一场噩梦。

试试这样的：

<button data-action="viewskpd" data-skpd-id="00cc72988f8240428b25ac5327b2a3c6" ...

在你的脚本中...

$(body).on('click', 'button[data-action="viewskpd"]', (e) => {
  console.log(e.target);  // 
});

未经测试，但这应该可以帮助您入门。将您的数据放在标记中，但将您的脚本放在脚本中。将它们分开。

【讨论】：

哦，我从来没想过...，你为什么用(e) => {我以为是function(e){
@Gagantous 我习惯使用 ES6 语法。 function(e) { } 在这里也可以正常工作。

【解决方案3】：

为什么不给<button class='btn btn-info btn-sm' ...分配一个ID，并在JS中编写它的click事件？

在您拥有oData.id 的任何位置，您都可以执行以下操作。

<button id='id1' class='btn btn-info btn-sm' ...

然后使用这个id1 作为选择器并编写该元素的click 事件，就像这样，

$(document).on("click", "#id1", function(){
    viewskpd(oData.id); // Call the required function
});

【讨论】：

【解决方案4】：

实际上，您需要在 viewskpd 函数中添加一个 string 变量。使用toString()函数，你必须像下面这样写：

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd("+oData.id.toStirng()+")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

00cc72988f8240428b25ac5327b2a3c6 对 JavaScript 没有任何意义，除非您将其转换为 string。

【讨论】：

【解决方案5】：

您也可以使用 `.请注意，这是一个不同于 " 和 ' 的特定字符。然后将变量括在 ${} 中，这样可以提高可读性：

let ntd = document.getElementById("ntd");
ntd.outerHTML = `<div class='btn-group'> 
                 <button class='btn btn-info btn-sm' 
                 onclick='viewskpd("${oData.id}")'
                 data-toggle='tooltip' title='Detail SKPD'>
                 <i class='fa fa-eye' style='color:white'>
                 </i></button></div>`;

【讨论】：