javascript - 使用哪种技术将任意字符串从模板引擎传递到 JavaScript（或者为什么不使用虚假的 HTML 属性）

Question

不用说我的问题使用了哪个模板引擎。

我参与了在 JSP 页面中找到此类代码的项目：

<li class="clazz" attr="XXX">...</li>

和从attr属性中提取值的 jQuery 代码：

$(".clazz").click(function () {
   var v = $(this).attr("attr");
   ...
}

实际上XXX是 URL。我将 JSP 代码更改为：

<li class="clazz"><a href="XXX">...</a></li>

和JS代码：

$(".clazz").click(function () {
   var v = $(this).find("a").attr("href");
   ...
}

现在我达到了拥有有效 HTML 的目标。

使用虚假标签会简化代码，但会产生无效的 HTML。

有没有简单的方法将数据传递给 JavaScript 并保持代码的简单性？

使用哪种技术将任意字符串从模板引擎传递到 JavaScript？

我假设这些数据不应该呈现给用户，并期望它不应该像隐藏数据那样基于 CSS：

<span id="real-points-count" style="display:none">${param}

更新。这段代码如何：

<div class="clazz" min="MINDATA" max="MAXDATA">...<>

可以转换为将MINDATA和MAXDATA传递给 JavaScript 以获得有效的HTML5吗？

score 4 · Accepted Answer

如果您可以使用 HTML5，则可以使用data-*属性，这些属性可以让您添加自定义属性来存储 HTML 元素的数据。

例如

<li class="clazz" data-myattr="XXX">...</li>

然后在 JS'

$(".clazz").click(function () {
   var v = $(this).data("myattr");
   ...
}

score 1 · Accepted Answer

你为什么不为此尝试本机javascript onclick。

看看这个..

<li class="clazz" onclick="myFunction('my_url')">...</li>

然后编写这个函数，它接受你的 URL 作为输入 .. 即 ..

<script type="text/javascript">
function myFunction(inUrl) {
    ....
};
</script>

通过这种方式，您可以维护有效的 HTML 并避免使用虚假标签。

注意：您可以通过任何号码。函数的参数，甚至是元素本身。

希望这可以帮助。

2 回答 2