用單選按鈕更改背景圖片

我想用單選按鈕選擇來更改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)');} 
     }); 
    });

但是這樣的背景沒有改變。

來源

2012-08-28 shahbaz

如果用jsfiddle發佈可運行代碼會很好。 – uuidcode

在這裏我已經完成了上述問題的完整演示。請檢查演示鏈接。

演示：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-28 05:51:14 gaurang171

謝謝，它的工作。 – shahbaz

你這樣做是正確的，但你在你的jQuery有一個小的語法錯誤

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

應該

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

注意，在最後

Working Fiddle失蹤支架)

但將使用該做的更好的方法來獲取ID，然後應用交換機來檢查值設置背景

New Example

來源

2012-08-28 05:04:58 Champ

感謝您的迴應，我使用開關，因爲你建議，但它不是很好，只有其中一個圖像作品其他仍然沉默。 – shahbaz

你見過我的例子嗎？ – Champ

是的。這是工作，當我替換圖像url b目錄路徑不工作的圖像， – shahbaz

第一個問題在你的代碼

你的第二個，如果條件錯誤if($("input#steel").attr("checked") 它應該是if($("input#steel").attr("checked"))你的閉括號在這裏不存在那麼你應該只更改下一個標籤的意思就是控制不是整個html。

所以使用jQuery的文檔這裏http://api.jquery.com/next/

的.next()功能我在這裏試過的jsfiddle試驗驗證碼：http://jsfiddle.net/FB37y/

來源

2012-08-28 05:09:54

有）在下面的行代碼的丟失：

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

來源

2012-08-28 05:10:11 Codegiant

是爲你工作？ – Codegiant

是否需要修改？ – Codegiant

謝謝，它現在正在工作，Mr.keyur先生（下回答幫助） – shahbaz

用單選按鈕更改背景圖片

回答

相關問題