Связь изменения другого CSS с классами

Question

Изменение всех одинаковых classe (count) для эффекта 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 не работает, я пытаюсь использовать для ():

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 () или (для), но это не работает. Любое решение?

Answer 1

Я на самом деле не работаю должным образом, если у меня внутри есть другой класс, такой как class = "other imghover1", который там не работает и не работает при наведении на тот же элемент class = "imgval imghover1" ... (если выпри наведении мыши на вторую ссылку один два три)

Я пытаюсь использовать [class * = imghover], но результат тот же, содержание не меняется, если у вас больше классов ...

Answer 2

Вы можете просмотреть каждый тег привязки <a> и проверить, содержит ли его класс атрибутов ключевое слово imghover или не использовать функцию indexOf JS. Если список классов содержит слово, то будет добавлен следующий одиночный символ (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... -->

Answer 3

Вам не нужно писать при наведении курсора на каждый тег привязки. Вы можете использовать запуск атрибута select, используя ^, который выберет все элементы 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, чтобы узнать, правильно ли элемент добавляет / удаляет классы