Question

您好我正在尝试设置一个网页，如果我的客户选择某些选项，图片会出现在右上角，当您选择选项时，它会覆盖该图像上的其他图像以向您显示最终产品。我有一些代码，我从一个例子中进行了一些修改，然后进行了修改以使其工作，但是我坚持让它显示图像并在选中复选框时叠加并在未选中时隐藏它们。

CSS：

.overlay {
    display: none;
    position: absolute;
}
#map {
    position: relative;
    border: 1px solid black;
    width: 350px;
    height: 200px;
}
#station_A { 
    top: 5px; left: 85px; 
}
.hover { 
    color: green 
}

HTML：

<div id="map">
    <span id="station_A" class="overlay"><img src="/tn_bandannatop.png>"</span>
    <span id="station_B" class="overlay">Highlight image here.</span>
</div>

<p>
    <span class="hover station_A">Station Alpha</span> is one example.

</p>

JS：

jQuery(function() {
    jQuery('.overlay').each(function(i, el) {
        jQuery('.' + el.id)
            .mouseenter(function() { jQuery(el).css('display', 'inline') })
            .mouseleave(function() { jQuery(el).css('display', 'none') });
    });
});

更新：Fiddle is here 这是设置鼠标悬停，但我想将其更改为选中复选框和未选中复选框。

更新：在此处为 fiddle添加了复选框。现在将鼠标悬停在代码上以显示复选框选中时我想要它做什么。

Answer 1

我在这里有一些关于JSFiddle的工作：

http://jsfiddle.net/dynfvzsw/7/

Jquery实际上非常简单，你所要做的就是：

$("input[type='checkbox']").change(function() {
    var state = $(this).val();
    //
    $("#"+state).toggleClass("overlay");
});

然后，您只需将值添加到HTML中的复选框，如下所示：

<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta

Answer 2

以下是对您的小提琴进行的一些调整，根据选中/取消选中的相应复选框显示/隐藏两个元素：

https://jsfiddle.net/dynfvzsw/1/

以下是使其运行的基本JavaScript：

jQuery(function() {
    jQuery('.overlay').each(function(i, el) {
        jQuery('.' + el.id).click( function() {
            $('#' + $(this).attr('class')).toggleClass('overlay', !$(this).is(":checked"));
        });
    });
});

基本上它会使用overlay添加/删除课程toggleClass，这会将display设置为none：

.overlay {
    display: none;
}

这是基本的html：

<span id="station_A" class="overlay"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/tn_bandannatop.png"></span>
<span id="station_B" class="overlay">Highlight image here.</span>
<input class='station_A' type='checkbox'/>
<input class='station_B' type='checkbox'/>

当选中复选框时，如何使图像覆盖图像Jquery

2 个答案: