Question

如果单选按钮获得checked

，如何更改元素的背景图像

请看下面我的例子。

$("#outside input:radio").change(function(){
$("#color-outside").css("background-image", ($('#outside input:checked').data("image")));
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="color-outside" style="background-image: url();"></div>


<div class="swatch-element black">
<input id="black" type="radio" name="contact[Farbe Innen]" value="black" data-image="https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/schwarzblau.png?5811407930308074056" checked="checked" /> 
<label for="schwarz"></label>
</div>

<div class="swatch-element white">
<input id="white" type="radio" name="contact[Farbe Innen]" value="white" data-image="https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/weiss.png?5811407930308074056"/> 
<label for="white"></label>
</div>

Answer 1

＆＃13;

$(document).ready(function(){
 $("input:radio").change(function(){
$("#color-outside").css('background-image','url('+ $(this).data("image")+')');
});
});

＆＃13;

#color-outside{
  width: 100vw;
  height: 100vh;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="color-outside"></div>


<div class="swatch-element black">
<input id="black" type="radio" name="contact[Farbe Innen]" value="black" data-image="https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/schwarzblau.png?5811407930308074056" checked="checked" /> 
<label for="schwarz"></label>
</div>

<div class="swatch-element white">
<input id="white" type="radio" name="contact[Farbe Innen]" value="white" data-image="https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/weiss.png?5811407930308074056"/> 
<label for="white"></label>
</div>

＆＃13;

Answer 2

试试这个：

$("input:radio").change(function() {
    if ($(this).is(":checked")) {
        $("#color-outside").css("background-image", "url(" + $(this).data("image") + ")");
    }
});

请注意，您需要将change事件绑定到两个单选按钮。此外，由于取消选中单选按钮时change事件不，因此您可以省略.is(":checked")条件，因此代码会更短。

$("input:radio").change(function() {
    $("#color-outside").css("background-image", "url(" + $(this).data("image") + ")");
});

Answer 3

在您给定的HTML中，没有标识为outside的元素。您需要将背景图片网址放在url("")中。尝试以下。

＆＃13;

$(".swatch-element :radio").change(function() {
    $("#color-outside").css("background-image", "url(" + $(this).data("image") + ")");
});
$(".swatch-element :radio:checked").change(); //execute change event for checked radio button

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swatch-element black">
    <input id="black" type="radio" name="contact[Farbe Innen]" value="black" data-image="https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/schwarzblau.png?5811407930308074056" checked="checked" />
    <label for="schwarz"></label>
</div>

<div class="swatch-element white">
    <input id="white" type="radio" name="contact[Farbe Innen]" value="white" data-image="https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/weiss.png?5811407930308074056" />
    <label for="white"></label>
</div>

<div id="color-outside" style="height: 200px; width:330px; background-size: cover;"></div>

＆＃13;

Answer 4

更改所选单选按钮后，获取所选单选按钮的数据图像属性，并将图像设置为div的背景图像。

要为div应用背景图像，您还必须提供其他一些css属性。请参阅html div background image not showing up，请查看代码段以获取更多详情。

＆＃13;

$("input[type='radio']").change(function(){  
  $("#color-outside").css("background-image",'url(' + $(this).data("image") + ')');
});

＆＃13;

#color-outside{
   background-image: url("https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/schwarzblau.png?5811407930308074056");
  background-repeat: no-repeat;
  background-size: contain;
  height: 200px;
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="color-outside" >
  lorem ipsum
</div>


<div class="swatch-element black">
<input id="black" type="radio" name="contact[Farbe Innen]" value="black" data-image="https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/schwarzblau.png?5811407930308074056" checked="checked" /> 
<label for="schwarz"></label>
</div>

<div class="swatch-element white">
<input id="white" type="radio" name="contact[Farbe Innen]" value="white" data-image="https://cdn.shopify.com/s/files/1/1329/9539/t/2/assets/weiss.png?5811407930308074056"/> 
<label for="white"></label>
</div>

＆＃13;

JQuery：如果选中单选按钮，则更改背景图像

4 个答案: