Javascript JS：连接$（this）.val（）以获取id名称

我试图将鼠标悬停在h1上，并在id存储在h1值中的跨度上触发发光效果。我已经建立了一个工作示例，说明了发光将如何与一个句子一起工作，但我无法让它与h1一起工作。我希望能够在其中一个H1上悬停，使相同颜色的正方形发光。有人能告诉我哪里出了问题吗

$（文档）.ready（函数（）{
$（“#动词”）.mouseenter（函数（）{
$（“.verb”）.addClass（“悬停”）；
});
$（“#动词”）.mouseleave（函数（）{
$（“.verb”）.removeClass（“悬停”）；
});
$（“#名词”）.mouseenter（函数（）{
$（“.noon”）.addClass（“悬停”）；
});
$（“#名词”）.mouseleave（函数（）{
$（“.noon”）.removeClass（“悬停”）；
});
$（“h1”）.mouseenter（函数（）{
$（“#”）.concat（$（this.val（））.addClass（“悬停”）；
});
});
\u 21{
颜色：红色！重要
}
._106 {
颜色：橙色！重要
}
/*发光效应*/
#动词{
颜色：蓝色
}
#名词{
颜色：蓝色
}
.盘旋{
过渡：文本阴影0.1s线性；
文本阴影：0 0 3px蓝色；
}


动词-名词

我喜欢
骑
我的自行车
每一天
.



红色
橙色

■
■
通常使用
+
在JavaScript中连接字符串，而不是使用
.concat（）
方法，尽管
.concat（）
也可以<代码>+

稍微简单一些，阅读您的代码的人会更熟悉它。事实上，当我第一次查看您的代码时，我完全忘记了字符串有一个

.concat（）

方法

如上所述，

+

和

+=

的性能也更好，尽管在这种简单的情况下这并不重要

正如Patrick和Mikey所指出的，

h1

元素没有

值

，但您可以使用

数据值

对于像打开或关闭类这样的简单任务，您可以使用jQuery的

.hover（）

的单参数版本，在该版本中，您可以给出一个在

mouseenter

和

mouseleave

上调用的函数

把这些放在一起，它可能看起来像这样：

$（文档）.ready（函数（）{
$（“#动词”）.hover（函数（）{
$（“.verb”）.toggleClass（“悬停”）；
});
$（“#名词”）.hover（函数（）{
$（“.noon”）.toggleClass（“悬停”）；
});
$（“h1”）.hover（函数（）{
$（“#”+$（this.data（'value'））.toggleClass（“悬停”）；
});
});
\u 21{
颜色：红色！重要
}
._106 {
颜色：橙色！重要
}
/*发光效应*/
#动词{
颜色：蓝色
}
#名词{
颜色：蓝色
}
.盘旋{
过渡：文本阴影0.1s线性；
文本阴影：0 0 3px蓝色；
}


动词-名词

我喜欢
骑
我的自行车
每一天
.



红色
橙色

■
■
通常使用
+
在JavaScript中连接字符串，而不是使用
.concat（）
方法，尽管
.concat（）
也可以<代码>+

稍微简单一些，阅读您的代码的人会更熟悉它。事实上，当我第一次查看您的代码时，我完全忘记了字符串有一个

.concat（）

方法

如上所述，

+

和

+=

的性能也更好，尽管在这种简单的情况下这并不重要

正如Patrick和Mikey所指出的，

h1

元素没有

值

，但您可以使用

数据值

对于像打开或关闭类这样的简单任务，您可以使用jQuery的

.hover（）

的单参数版本，在该版本中，您可以给出一个在

mouseenter

和

mouseleave

上调用的函数

把这些放在一起，它可能看起来像这样：

$（文档）.ready（函数（）{
$（“#动词”）.hover（函数（）{
$（“.verb”）.toggleClass（“悬停”）；
});
$（“#名词”）.hover（函数（）{
$（“.noon”）.toggleClass（“悬停”）；
});
$（“h1”）.hover（函数（）{
$（“#”+$（this.data（'value'））.toggleClass（“悬停”）；
});
});
\u 21{
颜色：红色！重要
}
._106 {
颜色：橙色！重要
}
/*发光效应*/
#动词{
颜色：蓝色
}
#名词{
颜色：蓝色
}
.盘旋{
过渡：文本阴影0.1s线性；
文本阴影：0 0 3px蓝色；
}


动词-名词

我喜欢
骑
我的自行车
每一天
.



红色
橙色

■
■

在javascript中不是concanater。我想你的意思是

+

：

$（'#'）+concat（$（this.val（））.addClass（…）

@cale\b他们使用的是直接脱离字符串的文本，所以

。.concat（）

与

a=“.”a.concat（）相同

虽然下面的解决方案可能有效，但是

h1

标记没有

值

属性。用于添加自定义属性，例如

数据值

。在JS中，使用

$（this）。数据（'value'））

或

this.dataset.value

.StackOverflow有自己的可运行代码段引擎。请使用它而不是JSFIDLE来证明这个问题。

在javascript中不是concanater。我想你的意思是

+

：

$（'#'+concat（$（this.val（））.addClass（…）

@cale\b他们使用的是直接脱离字符串的文字，因此

“.concat（）

与

a=“.”a.concat（）

相同。虽然下面的解决方案可能有效，但是

h1

标记没有

值
属性。用于添加自定义属性，例如
数据值
。在JS中，使用
$（this.data（'value'））
或
this.dataset.value
.StackOverflow有它自己的可运行的代码段引擎。请使用它而不是JSFIDLE来证明这个问题。OP使用的是字符串文本以外的concat属性，即使用
作为属性访问器，而不是串联运算符