我有一组<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>
所以,它本质上是在保存“一”、“二”和“三”的值。
谢谢大家。
最佳答案
试试这个例子。在 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>
关于javascript - 传递动态 id 以在整个函数中重用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48847584/