使用变量访问连字符属性答案

【问题标题】：Accessing a hyphenated attribute using a variable使用变量访问连字符属性
【发布时间】：2019-09-24 16:05:19
【问题描述】：

以下语法有效：

hello = $("html").find('[id=foo-var]').html();

但是我们如何通过变量指定“foo-var”呢？

var holder = "foo-var";
hello = $("html").find('[id=' + holder + ']').html();

这当然行不通。

【问题讨论】：

使用 id 选择元素的更简单和更好的语法是使用 .find('#foo-var') 然后用变量替换应该也可以 .find('#'+holder)
var yoMama = 'foo-var'; document.querySelector('#'+yoMama).innerHTML; //pound yoMama innerHTML 对不起，我忍不住了

【解决方案1】：

如果属性值包含受限字符，则需要将其用引号引起来：

var holder = "foo-var";
var hello = $("html").find('[id="' + holder + '"]').html();

然而鉴于id 属性在DOM 中必须是唯一的，您应该首先使用id 选择器：

var holder = "foo-var";
var hello = $('#' + holder).html();

如果您有多个具有相同 id 的元素，那么这是一个需要在 HTML 中解决的单独问题。

【讨论】：

【解决方案2】：

更改引号"'"

var holder = "foo-var";
hello = $("html").find('[id="' + holder + '"]').html();

【讨论】：

【解决方案3】：

您可以使用模板文字以获得更好看的语法

$("html").find(`[id=${holder}]`).html();

【讨论】：