Question

更改所有相同的类（计数）以使用相同和其他类的css效果。

HTML：

<a class="imghover1" href="/en/?p=1">one</a>
<a class="imghover2" href="/en/?p=2">two</a>
<a class="imghover3" href="/en/?p=3">three</a>
<!-- and more... -->
<a class="imgval imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="imgval imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="imgval imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

此jQuery代码不起作用，我尝试使用for（）：

jQuery(document).ready(function($){
    totincr= $(".imgval").length;

    for(var incr=1; incr < totincr; incr++){
        $('.imghover'+incr).hover(
            function(){ 
                $('.imgval.imghover'+incr+' img').removeClass('img-gray'); 
                $('.imgval.imghover'+incr).addClass('img-text-color'); 
                $('.imgval.imghover'+incr).removeClass('no-underline'); 
                $('.imgval.imghover'+incr+' img').css("transition", "all 0.6s ease-out");
                $('.imgval.imghover'+incr).css("transition", "all 0.6s ease-out");
            },
            function(){ 
                $('.imgval.imghover'+incr+' img').addClass('img-gray');
                $('.imgval.imghover'+incr).removeClass('img-text-color'); 
                $('.imgval.imghover'+incr).addClass('no-underline'); 
            }
        );
    }      
});

此代码有效，但我需要创建一个“ imghover”，每个元素编号：

jQuery(document).ready(function($){
    $('.imghover1').hover(
        function(){ 
            $('.imgval.imghover1 img').removeClass('img-gray'); 
            $('.imgval.imghover1').addClass('img-text-color'); 
            $('.imgval.imghover1').removeClass('no-underline'); 
            $('.imgval.imghover1 img').css("transition", "all 0.6s ease-out");
            $('.imgval.imghover1').css("transition", "all 0.6s ease-out");
        },
        function(){ 
            $('.imgval.imghover1 img').addClass('img-gray');
            $('.imgval.imghover1').removeClass('img-text-color'); 
            $('.imgval.imghover1').addClass('no-underline'); 
        }
    );

    $('.imghover2').hover(
        function(){ 
            $('.imgval.imghover2 img').removeClass('img-gray'); 
            $('.imgval.imghover2').addClass('img-text-color'); 
            $('.imgval.imghover2').removeClass('no-underline'); 
            $('.imgval.imghover2 img').css("transition", "all 0.6s ease-out");
            $('.imgval.imghover2').css("transition", "all 0.6s ease-out");
        },
        function(){ 
            $('.imgval.imghover2 img').addClass('img-gray');
            $('.imgval.imghover2').removeClass('img-text-color'); 
            $('.imgval.imghover2').addClass('no-underline'); 
        }
    );       
    // and more...  
});

我尝试使用.each（）或（for），但是它不起作用。有解决办法吗？

Answer 1

您无需为每个锚标记在悬停时编写。您可以使用^使用属性选择的开始，它将选择所有类名以a开头的imghover元素。您可以使用悬停的锚标记类名来查找相关元素并产生悬停效果。

请参见下面的代码

jQuery(document).ready(function($){
    $('a[class^=imghover]').hover(
        function(){ 
            var className = $(this).attr('class');
            var $image = $('.imgval.' + className + ' img');
            var $anchor = $('.imgval.' + className);
            $image.removeClass('img-gray'); 
            $anchor.addClass('img-text-color').removeClass('no-underline'); 
            $image.css("transition", "all 0.6s ease-out");
            $anchor.css("transition", "all 0.6s ease-out");
        },
        function(){ 
            var className = $(this).attr('class');
            var $image = $('.imgval.' + className + ' img');
            var $anchor = $('.imgval.' + className);
            $image.addClass('img-gray');
            $anchor.removeClass('img-text-color').addClass('no-underline'); 
        }
    );
 });

.img-gray {color: gray;}
.img-text-color {color: red;}
.no-underline {color: green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a class="imghover1" href="/en/?p=1">one</a>
<a class="imghover2" href="/en/?p=2">two</a>
<a class="imghover3" href="/en/?p=3">three</a>
<!-- and more... -->
<a class="imgval imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="imgval imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="imgval imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

注意：我添加了临时CSS类，只是为了了解元素是否正确添加/删除类

Answer 2

我实际上不能正常工作，如果我内部有另一个类，例如class =“ other imghover1”，则当我在同一元素上=“ classval imgval imghover1”时，该类将无法工作并且无法进行悬停...（如果您悬停在第二个链接一二三）

我尝试使用[class * = imghover]，但结果相同，如果您有更多的课程，内容不会改变...

Answer 3

您可以遍历每个<a>锚标记，并使用imghover JS函数检查其属性类是否包含indexOf关键字。如果classlist包含单词，则将添加imghover的下一个单个字符（1、2、3等）。

这是演示

jQuery(document).ready(function($){
  var imgHover = 'imghover';
  var imgHoverLength = imgHover.length;
  var eleArr = [];
  
  $('a').each(function(){
    var classes = $(this).attr('class');
    if(classes.indexOf(imgHover) >= 0){
      var nextChar = classes.charAt(classes.indexOf(imgHover)+imgHover.length);
      eleArr.push('.'+imgHover+nextChar);
    }
  });
  
  var uniqueClasses = [];
  $.each(eleArr, function(i, el){
    if($.inArray(el, uniqueClasses) === -1) uniqueClasses.push(el);
  });
  var eleClass = uniqueClasses.join();

  $(eleClass).hover(
    function(){   
      var $elem = $(this);
      var $elemImg = $(this).children('img');
      $elemImg.removeClass('img-gray'); 
      $elemImg.addClass('img-text-color'); 
      $elemImg.removeClass('no-underline'); 
      $elemImg.css("transition", "all 0.6s ease-out");
      $elemImg.css("transition", "all 0.6s ease-out");
    },
    function(){ 
      var $elem = $(this);
      var $elemImg = $(this).children('img');
      $elemImg.addClass('img-gray');
      $elem.removeClass('img-text-color'); 
      $elem.addClass('no-underline'); 
    }
    );
});

.img-gray {
  color: gray;
}
.img-text-color {
  color: red;
}
.no-underline {
  text-decoration: none;
  color: #b400ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a class="imghover1" href="/en/?p=1">one</a>
<a class="imghover2" href="/en/?p=2">two</a>
<a class="imghover3" href="/en/?p=3">three</a>
<!-- and more... -->
<a class="imgval imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="imgval imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="imgval imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

<!-- and more... -->
<a class="other imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="other imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="other imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

链接将其他CSS更改为类

3 个答案: