Question

我有一个带有图片和复选框的标签。我想根据悬停进/出和复选框状态更改图像。

我有几个单选按钮，每个按钮有两个图像：＆＃34;图像激活＆＃34;和＆＃34;图像无效＆＃34;。

我想展示＆＃34;活跃＆＃34;选中按钮或标签悬停时的图像，以及未选中按钮且标签未悬停的非活动图像。我认为最好的方法是将图像源作为数据属性传递并与一些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

我的胖子JS解决方案

$('.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'));
        }
    }

Rails - 单选按钮根据选中，悬停和焦点更改图像

2 个答案: