Question

我在容器和3个单选按钮中放置了一个图像。当选择某些单选按钮时，我想在容器主图像上添加另一个图像。每个按钮在激活时都会显示不同的图像位置。

到目前为止我得到了：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" id="q156" name="quality[25]" value="1" /> 1
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q157" name="quality[25]" value="2" /> 2
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q158" name="quality[25]" value="3" /> 3
    </label> 
</div>
</div>
</div>
<div class="col-md-8 col-fl">
    <div id="img_box">
        <img style="width: 100%;" src="img/other/rounded_corners.png" />
    </div>

Answer 1

您可以将图像源添加为数据attr。到单选按钮。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" id="q156" name="quality[25]" value="1" data-img="http://placehold.it/350x150/ff0000" /> 1
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q157" name="quality[25]" value="2" data-img="http://placehold.it/350x150/00ff00"/> 2
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q158" name="quality[25]" value="3" data-img="http://placehold.it/350x150/0000ff" /> 3
    </label> 
</div>
<div class="col-md-8 col-fl">
<div id="img_box"></div>

img框为空，但大小和图像由css设置：

#img_box{
    width: 350px;
    height: 150px;
    background: url('http://placehold.it/350x150/ff0000')
}

然后添加一个在点击时附加img叠加的事件（使用来自单选按钮的源）：

 $(function(){
    $('input[type=radio]').click(function(){
        $this = $(this)
        $img_box = $('#img_box')
        $overlay = $('<img/>').attr('src',$this.data('img'))
        $img_box.html('').append($overlay)                    
    });
})

请参阅此示例：https://jsfiddle.net/fmytsjv7/1/

Answer 2

您可以使用jQuery，并将事件处理程序绑定到单选按钮。

喜欢这个：

$('input:radio[name="quality[25]"]').change(function(){ });

然后添加处理程序以直接更改目标图像容器或图像元素的属性/ css属性。

您可以使用jQuery .css()来更改目标元素的css属性

像：

$("#img_box").css({"height":"100px","width":"100px",background:"red"});

虽然，您可以使用jQuery .attr()来更改目标元素的属性。

喜欢:(在这种情况下是img＆＃39; s＆＃34; src＆＃34;属性）

$("#img_box > img").attr("src","path/to/whatever/image");

<强> HERE'S A SAMPLE IN JSFIDDLE

我看到你在问题中包含了jQuery标签，所以我假设你对基于jQuery的解决方案感兴趣。

如何通过单选按钮更改元素（img）的位置？

2 个答案: