选中复选框时如何使图像覆盖图像Jquery答案

【问题标题】：How do I make a image overlay a image when a checkbox is checked Jquery选中复选框时如何使图像覆盖图像Jquery
【发布时间】：2015-07-20 01:16:41
【问题描述】：

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

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 添加了复选框。现在将鼠标左键放在代码上，以显示选中复选框时我希望它执行的操作。

【问题讨论】：

如果你为此创建小提琴，你可能会得到更多的人响应......
你可能需要使用类似if ($(yourElement).is(':checked')) { do something }
从添加复选框开始可能是个好主意...

标签： javascript jquery html image checkbox

【解决方案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

【讨论】：

谢谢 Eric，这正是我想要的！非常感谢您的帮助！

【解决方案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"));
        });
    });
});

基本上，它使用toggleClass 添加/删除类overlay，将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'/>

【讨论】：