根據圖像選擇顯示新圖像

我正嘗試使用選項的單選按鈕在HTML中創建表單。單選按鈕需要單獨的可點擊縮略圖圖像（因此不會顯示瀏覽器樣式的單選按鈕，每個單選按鈕都不同）。將會有3組單選按鈕，每組有3個選項。根據圖像選擇顯示新圖像

這些需要結合在一起，根據用戶選擇的選項在頁面的其他位置顯示較大的主圖像。

我想讓主圖像動態變化，因爲用戶選擇每個選項。 - 我不想在最後使用提交按鈕的表單。

有沒有人有任何想法嗎？

我到目前爲止的代碼是：

<style> 
label {display:block;} 
.radio { 
    opacity: 0.5; 
    width: 80px; 
    height: 80px; 
    float: left; 
    margin: 5px;     
} 
.checked {opacity: 1;} 
#single {background: url(a.jpg);} 
#double {background: url(b.jpg);} 
#none {background: url(c.jpg);} 

</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 


<script type="text/javascript"> 
$(function() { 
    $('input[type=radio].radio-image').each(function() { 
     var id = this.id; 
     $(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>'); 
    }); 
    $('.newrad').live('click', function(e) { 
     e.preventDefault(); 
     var $check = $(this).prev('input'); 
     $('.newrad div').attr('class', 'radio'); 
     $(this).find('div').addClass('checked'); 
     $('input[type=radio].radio-image').attr('checked', false); 
     $check.attr('checked', true); 
    }); 
}); 

    $(document).ready(function() { 
     $("input:radio[name=wardrobe]").change(function() { 
      if (this.value == "a") { 
       $("#imgOne").attr(
        'src', 'a.jpg' 
       ); 
      } 
      else { 
       $("#imgOne").attr(
        'src', 'b.jpg'     
       ); 
      } 
     }); 
    }); 
</script> 

</head> 

<body> 


<form> 
<label><input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />A</label> 
<label><input type="radio" class="radio-image" name="wardrobe" id="double" value="b" />B</label> 
<label><input type="radio" class="radio-image" name="wardrobe" id="none" value="c" />C</label> 
</form> 


<img id="imgOne" /> 


</body>

這只是部分的代碼，對第一套方案，我用它作爲一個起點。

我設法將縮略圖作爲單選按鈕使用，效果很好。我設法得到正常的單選按鈕來交換圖像。但我不能一起工作。

來源

2013-06-19 James

你有什麼？ – Voles

你可以給你目前的代碼，研究例子或其他東西嗎？ – tenstar

所以，我認爲你是在正確的軌道上。雖然我對隱藏按鈕的功能有點困惑，並用一個標籤取代它，但我相信你想讓縮略圖具有單選按鈕的功能。所有你所要做的就是替換當前

<input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />

與

<img src="a.jpg" class="radio-image" data-ref="a"/>

，改變你的jQuery允許這些新圖片：

$(document).ready(function() { 
    $('img.radio-image').click(function() { 
     $("img.selected").removeClass("selected"); 
     $(this).addClass("selected"); 
     $("#imgOne").attr("src", $(this).attr("data-ref") + ".jpg"); 
    }); 
});

和CSS

img{ 
    border: 1px solid transparent; 
} 
.selected { 
    border: 1px solid #00c; 
}

訣竅是你的圖片只需要坐在那裏。讓jQuery完成繁重的工作。我希望這有幫助。

來源

2013-06-19 13:51:53

太好了，非常感謝。這已經解決了代碼的第一個問題，這非常棒。我現在只需要弄清楚如何將這些代碼與其他兩組單選按鈕合併以影響主圖像。 - 你有什麼想法嗎？ - 我嘗試在單獨的表單中添加數字2的data-ref，但選擇器只允許我在所有選項中選擇一個。 – James

我認爲你只需要添加兩個圖像： –

是的，謝謝，我讓它工作得很好。我想添加另外兩組3個單選按鈕。例如。設置1 - 選擇a，b或c。設置2 - 選擇d，e或f並設置3 - 選擇g，h或i。然後結果就像這樣建立adg.jpg，adh.jpg，aeh.jpg等 – James

根據圖像選擇顯示新圖像

回答

相關問題