Geek asks and answers

Change background image with switch

I want to change the backgroundImage html with a select switch. Each switch has a different image. I tried this:

      <input name="BG" id="wood" type="radio" value="" class="bgCollection" />
      <label for="radio">Wood</label>

      <input name="BG" id="steel" type="radio"  class="bgCollection"/>
      <label for="radio">Steel</label>

      <input name="BG" id="metal" type="radio" value="" class="bgCollection"/>
      <label for="radio">Black metal</label>

Jquery:

    $(document).ready(function(){
            $(".bgCollection").change(
               function()
          {
        if($("input#wood").attr("checked"))  
                  {$("html").css('backgroundImage','url(../images/wood.jpg)');}
        if($("input#steel").attr("checked")
                   {$("html").css('backgroundImage','url(../images/BG-steel.jpg)');}
        if($("input#metal").attr("checked"))
                   {$("html").css('backgroundImage','url(images/blackMetal.jpg)');}
       });
  });

But in this way the background does not change.

+5
source share
4 answers

Here I did a full demo for the above problem. check out the demo link.

Demo: http://codebins.com/bin/4ldqp80

HTML:

<input name="BG" id="wood" type="radio" value="" class="bgCollection" />
<label for="radio">
  Wood
</label>

<input name="BG" id="steel" type="radio"  class="bgCollection"/>
<label for="radio">
  Steel
</label>

<input name="BG" id="metal" type="radio" value="" class="bgCollection"/>
<label for="radio">
  Black metal
</label>

JQuery

$(function() {
    $(".bgCollection").change(function() {
        if ($("#wood").is(":checked")) {
            $("body").css('backgroundImage', "url('http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg')");
        }
        if ($("#steel").is(":checked")) {
            $("body").css('backgroundImage', "url('http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg')");
        }
        if ($("#metal").is(":checked")) {
            $("body").css('backgroundImage', "url('http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg')");
        }
    });
});

Demo: http://codebins.com/bin/4ldqp80

+3
source

You are doing it right, but you have a small syntax error in jQuery

if($("input#steel").attr("checked")

Must be

if($("input#steel").attr("checked"))

Note that the missing parentheses )at the end

Working script

, , ,

+2

First problem in code

Second, if the conditions are incorrect. if($("input#steel").attr("checked") It must be a if($("input#steel").attr("checked"))closed bracket. There is one more thing that you should change, only the following label means control not all html.

So use .next()jquery Documentation function here http://api.jquery.com/next/

I tried this code on jsfiddle test here: http://jsfiddle.net/FB37y/

0
source

The next line of your code is missing):

if($("input#steel").attr("checked"))
                   {$("html").css('backgroundImage','url(../images/BG-steel.jpg)');}
0
source

More articles:


All Articles