将 class 名称添加到确切的元素

Question

其中一个 div 有 7 个 link，另一个 div 有 7 个 div。示例 https://jsfiddle.net/tania_poltava/2oqtr9v1/ 我想，当第一个 link 悬停以影响第一个 img 时，添加 class;和其他 links.

我正在尝试这样做 - 获取悬停的 link 的数量，然后寻找具有 class 名称的 div，并尝试添加新的 class.

<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);

})

})
})

Answer 1

已编辑：您的代码的答案是；

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);

    })

  })
})

不是最好的但更简单和正确的方法：https://jsfiddle.net/g3wjc6tz/1/

将 class 名称添加到确切的元素

Add class name to an exact element

javascript

jquery

hover