Question

var customlink= "<div style='text-align:left;'>some text is here";

customlink+="<a href='#' title='test link' class='class1' onclick='show('"+val1+"','"+val2+"','"+val3+"')';></a></div>"

当使用上面的代码创建带有动态值的超链接时，超链接不是用单引号中的动态值创建的。它给了我以下结果。

<a href="#" title="test link" class="class1" onclick="show(" 4','4','4')';=""></a>

我需要在上面的代码中更改什么？

Answer 1

问题是由于在方法调用的参数中使用了引号。您需要使用 \ 字符转义它们：

var val1 = 1;
var val2 = 2;
var val3 = 3;
var customlink = '<div style="text-align:left;">some text is here <a href="#" title="test link" class="class1" onclick="show(\'' + val1 + '\',\'' + val2 + '\',\'' + val3 + '\')";>Link...</a></div>';

document.querySelector('div').innerHTML = customlink;

function show(a, b, c) {
  console.log(a, b, c);
}

<div></div>

通过使用 data 属性以及不显眼的事件处理程序，更好地完全避免该问题并提高代码质量：

let val1 = 1;
let val2 = 2;
let val3 = 3;

let customlink = `<div style="text-align: left;">some text is here <a href="#" title="test link" class="class1" data-val1="${val1}" data-val2="${val2}" data-val3="${val3}">Link...</a></div>`;

let div = document.querySelector('div');
div.innerHTML = customlink;

div.querySelector('a').addEventListener('click', e => {
  var elData = e.target.dataset;
  console.log(elData.val1);
  console.log(elData.val2);
  console.log(elData.val3);
});

<div></div>

Answer 2

我认为你可以这样做。

function generatetage(val1,val2,val3){
  var customlink= "<div style='text-align:left;'>some text is here";

  customlink+=`<a href='#' title='test link' class='class1'    onclick="show('${val1}','${val2}','${val3}')">testlink</a></div>`
  document.getElementById("tagarea").innerHTML=customlink;
}

<div id="tagarea"></div>
<button onclick="generatetage(4,4,4)">testButton</button>

使用动态值将 href 标签附加到 jQuery 中的 div

2 个答案: