複数の画像をマウスオーバーでスワップ

Question

私はマウスオーバーで複数の画像を交換したいと考えており、これを行う方法を探しています。私は複数の星を '明るくする'ことを目指しています。以下のコードはうまく動作しますが、カーソルが3番目の星の上を飛んでいるときなど、3つ星のように点灯する最善の方法は何ですか？

<div class="rating" data-value="4"> 
<img src="star.png"/> 
<img src="star.png"/> 
<img src="star.png"/> 
<img src="star.png"/> 
</div> 

とJS：

$(".rating > img") .mouseover(function() { 
      this.src= "star-on.png"; 
     }).mouseout(function() { 
      this.src= "star.png"; 

}); 

Answer 1

あなたがマウスオーバーされたセット内の星のインデックスを取得し、そのインデックスに基づいて星の正しい量を置き換えることによって、これを行うことができます。

$(".rating > img").mouseover(function() { 
 
    // Get the index of the star that is being hovered over 
 
    var idx = $("img").index(this); 
 
    
 
    // Loop only over the stars that should be highlighted and highlight them. 
 
    // Use the index to know how many to loop over 
 
    for(var i = 0; i < idx + 1; i++){ 
 
     // "Light up" the star: 
 
     $(".rating > img")[i].src= "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Full_Star_Blue.svg/2000px-Full_Star_Blue.svg.png"; 
 
    } 
 
    }).mouseout(function() { 
 
     
 
    // Turn off all stars 
 
    $(".rating > img").each(function(){ 
 
    this.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png" 
 
    }); 
 

 
});

img { 
 
width:30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="rating" data-value="4"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png"> 
 
</div>

Answer 2

私がめざしULDはただ、これは純粋なCSSとフレキシボックス機能で簡単に達成可能であることを言及したい：

* {box-sizing:border-box;} 
 

 
body {padding:30px;} 
 

 
.stars { 
 
    padding:10px; 
 
    background:#fff; 
 
    display:flex; 
 
    flex-direction:row-reverse; 
 
} 
 

 
.stars .star { 
 
    flex: 0 1 50px; 
 
    background:red; 
 
    padding:20px; 
 
} 
 

 
.stars .star:hover, .stars .star:hover ~ .star { 
 
    background:salmon; 
 
}

<div class="stars"> 
 
    <div class="star">4</div> 
 
    <div class="star">3</div> 
 
    <div class="star">2</div> 
 
    <div class="star">1</div> 
 
</div>

Answer 3

ここプレーンバニラのJavaScriptの例です：

var stars = document.querySelector('.stars') 
 

 
stars.addEventListener('mouseover', function(event) { 
 
    var target = event.target 
 
    var index = target.dataset.index 
 

 
    for (var i = 0; i < 5; i++) { 
 
    var star = stars.querySelector('[data-index="' + i + '"]') 
 
    star.classList.toggle('active', i <= index) 
 
    } 
 
}) 
 

 
stars.addEventListener('mouseleave', function(event) { 
 
    for (var i = 0; i < 5; i++) { 
 
    var star = stars.querySelector('[data-index="' + i + '"]') 
 
    star.classList.toggle('active', false) 
 
    } 
 
})

.star { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
    background: white; 
 
} 
 

 
.star.active { 
 
    background: yellow; 
 
}

<div class="stars"> 
 
    <div class="star" data-index="0"></div> 
 
    <div class="star" data-index="1"></div> 
 
    <div class="star" data-index="2"></div> 
 
    <div class="star" data-index="3"></div> 
 
    <div class="star" data-index="4"></div> 
 
</div>