问题描述
我无法理解这个!请帮忙!
我想要做的是,当我将鼠标悬停在 div 类上时,我希望该 div 的背景发生变化,但我也希望该类的所有其他 div 更改背景颜色,如果它们具有相同的文本值。
例如:
约翰被提及 3 次,刘易斯被提及两次。所有其他人只在那里一次。将鼠标悬停在 John 上将突出显示悬停的 div 以及具有相同文本的所有其他 div。然后,当不再悬停时,应删除突出显示。
任何帮助将不胜感激。谢谢。
$(document).ready(function() {
$('.users > .user').hover(function() {
var current = $(this);
$('.users > .user').each(function() {
if (!$(this).is(":contains('" + current.text() + "')")) {
$(this).closest('.users > .user').addClass('bg2');
}
});
});
});
* {padding:0;margin:0;Box-sizing:border-Box;}
ul {
list-style-type:none;
width:150px;
}
li {
height:40px;
background-color:#FFF5D7;
margin-bottom:10px;
line-height:38px;
text-align:center;
font-family:arial;
font-weight:bold;
border:2px solid #999;
}
.bg2 {background-color:#4DA6FF;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="users">
<li class="user">John</li>
<li class="user">Peter</li>
<li class="user">John</li>
<li class="user">Lewis</li>
<li class="user">Graham</li>
<li class="user">Shaun</li>
<li class="user">John</li>
<li class="user">Lewis</li>
</ul>
解决方法
你可以试试这样的。
$(document).ready(function () {
$('.users > .user').mouseenter(function () {
var current = $(this);
$('.users > .user').each(function () {
// Contains Matches For Text Everywhere In Word
// if ($(this).is(":contains('" + current.text() + "')")) {
// This way you match full text
// Using Trim To Also Make Sure You Have No Empty Spaces
if ($(this).text().trim() === current.text().trim()) {
$(this).closest('.users > .user').addClass('bg2');
}
});
});
$('.users > .user').mouseleave(function () {
$('.users > .user').removeClass("bg2");
});
});
但正如其他人所说,您可能需要先做一些研究,然后再提出之前可能已经回答过的问题。