5

ラジオボタンを選択してhtmlのbackgroundImageを変更したい。ラジオボタンごとに画像が異なります。私はそれを次のように試しました：

      <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)');}
       });
  });

しかし、このように背景は変化していません。

4

4 に答える 4

3

ここで私は上記の問題の完全なデモを行いました。デモリンクを確認してください。

デモ： 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')");
        }
    });
});

デモ： http ：//codebins.com/bin/4ldqp80

于 2012-08-28T05:51:14.513 に答える
2

あなたはそれを正しくやっていますが、jQueryに小さな構文エラーがあります

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

する必要があります 

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

)最後に角かっこがないことに注意してください

ワーキングフィドル

しかし、より良い方法は、これを使用してIDを取得し、スイッチを適用して値をチェックして背景を設定することです。

新しい例

于 2012-08-28T05:04:58.307 に答える
0

コードの最初の問題

条件が間違っif($("input#steel").attr("checked") ている場合の2番目の場合if($("input#steel").attr("checked"))ここに閉じ括弧がない場合は、次のラベルのみを変更する必要があります。これは、HTML全体ではなく制御を意味します。

したがって.next()、ここでjqueryドキュメントの関数を使用してくださいhttp://api.jquery.com/next/

私はここでjsfiddleテストでこのコードを試しました：http：//jsfiddle.net/FB37y/

于 2012-08-28T05:09:54.970 に答える
0

コードの次の行に）がありません。

if($("input#steel").attr("checked"))
                   {$("html").css('backgroundImage','url(../images/BG-steel.jpg)');}
于 2012-08-28T05:10:11.270 に答える