[一个div中有7个链接,另一个div中有7个div。范例https://jsfiddle.net/tania_poltava/2oqtr9v1/我想,当第一个链接悬停在第一个img上时,添加类;以及其他链接。
尝试执行此操作-获取悬停链接的数量,然后使用具有该编号的类名查找div,然后尝试添加新类。
<div class="links">
<a href="#" class="services__link--1">button1</a>
<a href="#" class="services__link--2">button2</a>
<a href="#" class="services__link--3">button3</a>
<a href="#" class="services__link--4">button4</a>
<a href="#" class="services__link--5">button5</a>
<a href="#" class="services__link--6">button6</a>
<a href="#" class="services__link--7">button7</a>
</div>
<div class="rounds">
<div class="services__round--1"></div>
<div class="services__round--2"></div>
<div class="services__round--3"></div>
<div class="services__round--4"></div>
<div class="services__round--5"></div>
<div class="services__round--6"></div>
<div class="services__round--7"></div>
</div>
.rounds div {
background: grey;
width:40px;
height: 40px;
border-radius: 50%;
}
.services__round--active {
background: green;
}
jQuery(function ($) {
$(document).ready(function() {
var link = $(".links a");
var linkClass = $(link).attr('class');
var linkNumb = linkClass.replace(/[^0-9]/g,'');
var roundClass = "services__round--" + linkNumb;
$(link).hover(function(){
var round = $(roundClass).addClass('services__round--active');
// check
console.log(linkNumb);
console.log(linkClass);
console.log(roundClass);
})
})
})
这不是最好的方法,您可以在jQuery中使用HTML的属性,我将编辑这篇文章以获得更好的方法。
https://jsfiddle.net/g3wjc6tz/
jQuery(function($) {
$(document).ready(function() {
var link = $(".links a");
$(link).hover(function() {
// check
$('.services__round--active').removeClass('services__round--active')
var linkClass = $(this).attr('class');
var linkNumb = linkClass.replace(/[^0-9]/g, '');
var roundClass = "services__round--" + linkNumb;
var round = $('.' + roundClass).addClass('services__round--active');
console.log(linkNumb);
console.log(linkClass);
console.log(roundClass);
})
})
})