将类名添加到精确元素中

问题描述 投票:0回答:1

[一个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);

})

})
})
javascript jquery hover
1个回答
0
投票

这不是最好的方法,您可以在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);

    })

  })
})
© www.soinside.com 2019 - 2024. All rights reserved.