У меня есть следующий HTML-код. По сути, 4 блока одинакового стиля, которые встроены друг в друга. Когда я навешиваю на каждое отдельное поле, я пытаюсь изменить img src на data-alt-src, только для отдельного div, который зависает.

Для этого у меня есть jQuery ниже. Но это очень жестко запрограммировано, мне интересно, есть ли лучший способ сделать это? Кроме того, с легкостью в использовании .4s было бы огромным подспорьем, поскольку у меня уже есть CSS, делающий это для цвета фона. Основное исходное изображение - синее, а альтернативное - белое.

<div class="skillsBox">
    <div class="skill_div">
        <div class="skill_img">
            <img src="css/house.png" data-alt-src="css/house2.png" alt="House"/>
        </div>
        <div class="skill_title">
            <h3>Repairs</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/settings.png" data-alt-src="css/settings2.png" alt="Repair"/>
        </div>
        <div class="skill_title">
            <h3>Improvement</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/shopping-cart.png" data-alt-src="css/shopping-cart2.png" alt="Cart"/>
        </div>
        <div class="skill_title">
            <h3>Affordable</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/like.png" data-alt-src="css/like2.png" alt="Like"/>
        </div>

        <div class="skill_title">
            <h3>Satisfaction</h3>
        </div>
    </div>
</div>

Вот jQuery:

$(".skill_div:nth-of-type(1)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(1) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(2)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(2) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(3)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(3) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(4)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(4) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    });

Большое спасибо, я попытался найти ответ, но не смог найти с моими конкретными ключевыми словами, если это было сделано, прежде чем я действительно извиняюсь.

0
Rio Karim 31 Дек 2017 в 18:56

2 ответа

Лучший ответ

Вы можете просто назначить обработчик событий каждому .skill_div и получить доступ к каждому конкретному внутри функции обработчика, используя $(this):

$(".skill_div").on('mouseenter mouseleave', 
  function () {
    var $this = $(this).find("img");
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource)
  }
);

Решением, которое даже не требует Javascript, будет этот подход CSS:

<div class="skill_div">
    <div class="skill_img">
        <img src="css/settings.png" alt="Repair"/>
        <img src="css/settings2.png" alt="Repair"/>
    </div>
    <div class="skill_title">
        <h3>Improvement</h3>
    </div>
</div>
<style type="text/css">
  .skill_div img { transition-duration: .3s; }
  .skill_div img + img { opacity: 0; }
  .skill_div img:first-of-type { position: absolute; }
  .skill_div:hover img:first-of-type { opacity: 0; }
  .skill_div:hover img + img { opacity: 1; }
</style>
0
connexo 31 Дек 2017 в 17:29

Спасибо за помощь в комментариях. Теперь я сделал это намного проще для глаз с помощью следующего кода:

  $(".skill_div").mouseenter(
   function () {
    var $this = $(this).find("img");
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource)
   }
  )

  $(".skill_div").mouseleave(
   function () {
   var $this = $(this).find("img");
   var newSource = $this.data('alt-src');
   $this.data('alt-src', $this.attr('src'));
   $this.attr('src', newSource)
  }
 )

Пожалуйста, не стесняйтесь добавлять дальше, если это можно улучшить.

0
Rio Karim 31 Дек 2017 в 16:42