將 class 名稱添加到精確元素

Question

一個 div 中有 7 個鏈接，另一個有 7 個 div。 示例https://jsfiddle.net/tania_poltava/2oqtr9v1/我想要，當第一個鏈接懸停在第一個 img 上時，添加 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/