Question

我有几个以相同名称开头的跨度，而onMouseOver我需要突出显示具有相同类名的所有内容。示例：当我MouseOver跨越“inner1”时，我希望它们都突出显示。

<span class="inner1">Over on this paragraph.</span>
<span class="inner2">Dont over</span>
<span class="inner1">Over on this paragraph.</span>
...

我已经尝试了这个，它几乎就在那里，但是没有把课程切换回去。它保持“过度”类。

$('*[class^="inner"]').hover(function() {
    $currentId=this.className.slice(-1);
    $(".inner"+$currentId).toggleClass("over");
});

https://jsfiddle.net/0y65db2z/

关于我做错的任何想法？ TXS

Answer 1

您可以将第二个回调传递给悬停函数，该函数将在鼠标离开元素后运行，但代码中有一个catch：

element.className现在为inner1 over，因此您无法简单地让inner1类来检测应更改其他元素。

我建议使用单个班级和data-*属性来识别元素＆＃34;等于＆＃34;。

检查此实施：

＆＃13;

$('.inner').hover(function() {
	$('[data-type=' + this.dataset.type + ']').addClass('over');
}, function(){
    $('[data-type=' + this.dataset.type + ']').removeClass('over');
});

＆＃13;

div {
  margin: 10px;
  background-color: yellow;
  padding: 10px;
}

span {
  margin: 5px;
  background-color: gray;
  padding: 5px;
  line-height: 40px;
  white-space: nowrap;
}

.over {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onlyThese">
  <span class="inner" data-type="1">Over on this paragraph.</span>
  <span class="inner" data-type="2">Over on this 2.</span>
  <span class="inner" data-type="1">Over on this paragraph.</span>
  <span class="inner" data-type="4">Over on this 4</span>
  <span class="inner" data-type="2">Over on this 2.</span>
  <span class="inner" data-type="1">Over on this paragraph.</span>
  <span class="inner" data-type="4">Over on this 4.</span>
</div>

<span class="inner4">dont hover blue.</span>

＆＃13;

突出显示以相同名称开头的几个类。无法切换回来

1 个答案: