我目前正在使用重力形式和图像插件在Wordpress中创建一个表单,这允许我插入图像而不是单选按钮。但是,我希望在选中单选按钮时更改图像。我的问题是我不知道如何处理这个问题,如何在HTML中直接设置背景图像时将其定位?
<div class='ginput_container ginput_container_radio'>
<ul class='gfield_radio' id='input_1_2'>
<li class='gchoice_1_2_0'><input name='input_2' type='radio' value='' id='choice_1_2_0' tabindex='1' /><label for='choice_1_2_0' id='label_1_2_0'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image1.com)"><img src="http://image1.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
<li class='gchoice_1_2_1'><input name='input_2' type='radio' value='' id='choice_1_2_1' tabindex='2' /><label for='choice_1_2_1' id='label_1_2_1'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image2.com)"><img src="http://image2.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
<li class='gchoice_1_2_2'><input name='input_2' type='radio' value='' id='choice_1_2_2' tabindex='3' /><label for='choice_1_2_2' id='label_1_2_2'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image3.com)"><img src="http://image3.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
</ul>
</div>
我非常感谢能解决这个问题的任何帮助。
如果您需要更多信息,请告诉我们,谢谢
答案 0 :(得分:1)
通用表格是:
input + label { /* css for unchecked state */ }
input:checked + label { /* css for checked state */ }
input { display: none; }
input {
display: none;
}
input + label { background-color: red; }
input:checked + label { background-color: black; color: white ; }
&#13;
<input id=option1 type=radio name=dd checked><label for=option1>select</label>
<input id=option2 type=radio name=dd><label for=option2>select 2</label>
&#13;
答案 1 :(得分:1)
您可以更具体地了解要更改的图像以及要从哪个单选按钮触发事件。但我还是试一试。
<input name='input_2' type='radio' value='' id='choice_1_2_0' tabindex='1' />
<div class="image-choices-choice-image-wrap" style="background-image:url(https://cdn.kimkim.com/files/a/content_articles/featured_photos/d1ea2d6f6d1aa470f661fa661bd0e2fb14fd2d2c/medium-886981758498052b0532dc3a96b98adf.jpg);height:200px;width:400px">
<script>
$('#choice_1_2_0').click(function(){
// If radiobuton is checked
if ($(this).is(':checked'))
{
// Change background image
$('.image-choices-choice-image-wrap').css("background-image", "url(https://cdn.kimkim.com/files/a/content_articles/featured_photos/7a4f69e48562c9adbee4f090033454a8ab23c135/medium-e5cbb5b7a25c93f53245e256729efff8.jpg)");
}
});
</script>
如果您已经没有
,请不要忘记添加jQuery答案 2 :(得分:0)
我最终使用了以下指南: https://css-tricks.com/override-inline-styles-with-css/
插件在选中单选按钮时添加了类.image-choices-choice-selected。因此,我使用以下代码来实现这一诀窍:
.image-choices-choice-selected #label_1_2_2 span[style] {
background-image:url(http://newimage1.com) !important;
}
感谢您的建议,我想如果没有添加这个类,我可以使用jQuery。