Question

我有一组具有唯一ID的<p>元素（＃one-context，＃two-context，＃three-context）。我想透露一个相应的div元素（以＃34开头;缩放 - ＆＃34;以＆＃34;一个＆＃34;，＆＃34;两个＆＃34;或＆＃34结束;当三个＆＃34;）悬停在每个<p>元素上时。

是否可以编写代码，简单＆amp;简而言之，所以当每个元素悬停时，通配符（？）＆＃34;一个＆＃34; ＆＃34; 2＆＃34;或＆＃34;三＆＃34; 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>

所以，它基本上保存了＆＃34;一个＆＃34;，＆＃34;两个＆＃34;和＆＃34;三＆＃34;。

谢谢大家。

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>

传递动态id以在整个功能中重用

1 个答案: