更改基於單選按鈕選擇的Javascript可變圖像源

如果此問題已得到解答，請事先道歉。我已經通過StackOverflow（以及其他網站）進行搜索，任何類似的問題似乎都沒有幫助我。無論如何，這是我的困境：更改基於單選按鈕選擇的Javascript可變圖像源

我有一個單選按鈕，應該控制一個javascript變量的圖像源。 實質上，我希望圖片在點擊時發生變化，並且這種情況發生的方式只需要在頁面上進行最少量的更改。我意識到這可能是一個簡單的請求，但我沒有那種JavaScript經驗，這一直在推動着我。

有關究竟如何我的頁面是內置的一些背景資料：

一切都包含一個Drupal模塊中。 Drupal模塊連接到我們的主服務器，主服務器託管許多網頁和小程序。單獨的applet使用Javascript，jQuery，CSS + HTML構建。

我不能共享代碼，因爲它是在僱主的工作，但如果你想要我進一步闡述或給一些pseduocode我可以做到這一點。

謝謝！

（PS - 這是我第一次發佈到StackOverflow，我想我遵循社區準則，但如果有任何建議，我可以更好地提出我的問題（和任何未來的），請給我一個線！）

來源

2014-04-24 skciva

作業是否能夠縮小問題所在的位置 –

你可以做到這一點通過以下方式

HTML

<img id="my_image" src="http://i.imgur.com/tL6nW.gif" alt=""> 

    <br> 
<input class="radio" type="radio" name="radio" value="http://i.imgur.com/tL6nW.gif" checked>Image1<br> 

<input class="radio" type="radio" name="radio" value="http://i.imgur.com/BfZ5f.gif">image2 
</form>

$('.radio').on({ 
    'click': function(){ 

     var image_url=$(this).val(); 
     $('#my_image').attr('src',image_url); 
    } 
});

這裏是一個JsFiddle

如果你想讓它完全動態的，你可以在初始化頁面加載時間的圖像元素的默認圖像了。附加的代碼將是這樣的。

$(document).on('ready',function(){ 
$('#my_image').attr('src','default.gif'); 
});

來源

2014-04-24 17:31:57 Shiva

嗨，感謝您的迴應！對我遲到的反應抱歉，但我測試了你的建議，似乎有所幫助。感謝您花時間幫助我。 – skciva

@vxela：謝謝他的評論，我很高興它有幫助。 :) 如果您的查詢得到充分回答，您可以接受答案並關閉該問題，否則您可以詢問是否需要進一步說明。乾杯:) – Shiva

更改基於單選按鈕選擇的Javascript可變圖像源

回答

相關問題