javascript - 传递动态 id 以在整个函数中重用

Question

我有一组<p>具有唯一 ID 的元素(#one-context、#two-context、#three-context)。当鼠标悬停在每个 <p> 上时，我想显示相应的 div 元素(以“scale-”开头，以“one”、“two”或“three”结尾)元素。

是否可以编写简单而简短的代码，所以当每个元素悬停时，p 的通配符(？)“一”“二”或“三”元素在遍历组时被存储？这是我目前所在的位置:

$("p[id$='-context']").mouseover(function() {
  $("div[id^='scale']").addClass("active-badge");
}).mouseout(function() {
  $("div[id^='scale-']").removeClass("active-badge");
});


<div id="scale-one">1</div>
<div id="scale-two">2</div>
<div id="scale-three">3</div>

<p id="one-context">Context 1</p>
<p id="two-context">Context 2</p>
<p id="three-context">Context 3</p>

所以，它本质上是在保存“一”、“二”和“三”的值。

谢谢大家。

Answer 1

试试这个例子。在 mouseover 函数内 this 是一个悬停节点。你得到它的 id，切断 "-context" 部分并得到像 "div[id='scale-one']"

这样的选择器

$("p[id$='-context']").mouseover(function() {
  $("div[id='scale-" + $(this).attr("id").replace("-context", "") + "']")
    .addClass("active-badge");
}).mouseout(function() {
  $("div[id='scale-" + $(this).attr("id").replace("-context", "") + "']")
    .removeClass("active-badge");
});

.active-badge {
    color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scale-one">1</div>
<div id="scale-two">2</div>
<div id="scale-three">3</div>

<p id="one-context">Context 1</p>
<p id="two-context">Context 2</p>
<p id="three-context">Context 3</p>