jquery - 将更改其他 CSS 与类链接

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) 但它不起作用。有什么解决办法吗？

标签： jquery

Answer 1

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

这是演示

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... -->