Rails - ラジオボタンは、チェック、ホバー、フォーカスに基づいて画像を変更します。

Question

私は画像とチェックボックスを持つラベルを持っています。ホバーイン/アウトとチェックボックスステータスに基づいて画像を変更したいと思います。

私はいくつかのラジオボタンと2つの画像を持っています： "image-active"と "image-inactive"。

ボタンがチェックされているか、ラベルが表示されているときに「アクティブ」画像を表示し、ボタンがチェックされずラベルが表示されていないときに非アクティブな画像を表示します。私はデータソースとして画像ソースを渡し、いくつかのJSで遊ぶのが最善の方法だと考えましたが、私は本当に分かりません。

<label> 
    <img data-active-image="xxx", data-inactive-image="..."> 
    <input type="radio"> 
</label> 

コードはRailsアプリケーションから生成されますが、ここでは問題はないと思います。心に留めておくべきことは、データアクティブイメージのものは動的でバックエンドによって処理されるため、CSSスタイル/背景トリックを本当に使いたくないということです。

Answer 1

これは、CSSの方がJSの方がはるかに簡単です。

<label> 
    <input type="radio"> 
    <img class="active" src="active_img_src"> 
    <img class="inactive" src="inactive_img_src"> 
</label> 

label input:checked ~ img.inactive, 
label:hover input:not(:checked) ~ img.inactive { 
    display:none; 
} 

label input:not(:checked) ~ img.active, 
label:hover input:checked ~ img.active { 
    display:none; 
} 

label:hover input:checked ~ img.inactive, 
label:hover input:not(:checked) ~ img.active { 
    display: block; 
} 

Answer 2

$('.mylabel').hover(function(){ 
    var image = $(this).find("img") 
    image.attr("src", image.data('active-image')); 
}, function() { 
    activeIfChecked(
     $(this).find("img"), 
     $(this).find("input") 
    ) 
}) 

$('.mylabel').on('click', function() { 
    $('.gender-label').each(function(){ 
     activeIfChecked(
      $(this).find("img"), 
      $(this).find("input") 
     ) 
    }) 
}) 

function activeIfChecked(image, checkbox){ 
    if(checkbox.prop('checked')) { 
      image.attr("src", image.data('active-image')); 
     } else { 
      image.attr("src", image.data('inactive-image')); 
     } 
    }