jQuery語法的條件邏輯與單選按鈕？

我的表單應該顯示基於在兩個不同字段中選擇的單選按鈕（形式爲&顏色）的圖像。jQuery語法的條件邏輯與單選按鈕？

我已經成功地創建了帶有鏈接的對象作爲每個屬性的值。現在我如何告訴jQuery更改#image的來源，例如我選擇gold + round？

這裏是虛擬圖片小提琴：https://jsfiddle.net/fbzf10x6/10/

<body> 
    <form action=""> 
<input type="radio" name="color" value="silver"> silver 
<br> 
<input type="radio" name="color" value="gold"> gold 
<br> 
<input type="radio" name="color" value="platin"> platin 
<br> <br> 

<input type="radio" name="form" value="round"> round 
<br> 
<input type="radio" name="form" value="oval"> oval 
<br> 

</form> 

<div><img id="image" src="#"></div> 

</body>

來源

2016-07-28 MrSocrathes

我覺得在你的小提琴對象不爲您服務您的解釋基礎這裏需要。對象應該包含如下組合： 'images = {silverround：「link1」，silveroval：「link2」，....} – CardCaptor

可以使用的onClick方法和JavaScript函數刷新你的圖像元素的src屬性值。

下面一個簡單的例子：

<html> 
     <head> 
     <script type='text/javascript'> 
     function reloadImgSrc(value) { 
      document.getElementById('image').innerHTML = '<img src="/img/'+value+'.jpg" />'; 
     } 
     </script> 
     </head> 

     <body> 
      <form action=""> 
      <input type="radio" name="color" value="silver" onclick="reloadImgSrc('silver')"> silver 
      <br> 
      <input type="radio" name="color" value="gold" onclick="reloadImgSrc('gold')"> gold 
      <br> 
      <input type="radio" name="color" value="platin" onclick="reloadImgSrc('platin')"> platin 

     </form> 

     <div id="image"></div> 

     </body> 
</html>

來源

2016-07-28 20:39:03 EspA

你可以擴展你的代碼保留了對所選擇的值，並用這兩個值，以查找對象的圖像URL：

var current = { 
    color: 'silver', form: 'oval' 
} 

$(document).ready(function() { 
    $("input[name=color],input[name=form]").change(function() { 
    current[this.name] = this.value; 
    $('#image').stop().fadeOut(200, function() { 
     $(this).attr('src', images[current.form][current.color]); 
    }).fadeIn(200); 
    }); 
});

JS Fiddle

來源

2016-07-28 20:52:25 trincot

謝謝！這工作非常好！如果我要添加第三個選項，如「大小」 - 我是否可以遵循相同的邏輯，並以與您相同的方式添加它？我認爲它變得相當複雜......我會將它添加到與顏色相同的「級別」上嗎？ – MrSocrathes

你將不得不在你的'圖像'對象中添加一層對象嵌套。另一種方法是在圖像文件名稱中遵循嚴格的命名約定。像'silver-oval-big.png'一樣，確保名稱中的部分與單選按鈕的值完全一致。然後，您可以生成圖像文件名稱而不需要* images *對象。 – trincot

感興趣的一點是：

$(this).attr('src', paths[images]);

路徑未定義。

如果在變更處理程序中沒有選擇名稱形式的輸入，我更喜歡設置第一個，因此在我可以解決正確的圖像後：images [formChecked] [colorChecked]。

我的片段：

var images = { 
 
    oval: { 
 
    silver: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=38201084", 
 
    gold: "http://images.betteridge.com/images/products/standard/BCA-16-17-14kt-yellow-gold-oval-signet-ring.jpg", 
 
    platin: "http://thumbs.ebaystatic.com/images/g/09UAAOSwBPNXR3UH/s-l225.jpg" 
 
    }, 
 

 
    round: { 
 
    silver: "http://www.silverringjewelry.com/silver-rings/fine-silver-rings.jpg", 
 
    gold: "https://img0.etsystatic.com/031/1/6658158/il_340x270.596198132_jls1.jpg", 
 
    platin: "http://images.costco-static.com/image/media/350-703887-847__1.jpg" 
 
    } 
 
}; 
 

 

 
$(document).ready(function() { 
 
    $('input[name="color"]').first().prop('checked', true); 
 
    $('input[name="form"]').last().prop('checked', true); 
 

 
    
 
    $('input[name="color"], input[name="form"]').change(function (e) { 
 
    var colorChecked; 
 
    var formChecked; 
 
    if (this.name == "color") { 
 
     colorChecked = this.value; 
 
     formChecked = $('input[name="form"]:checked').val() 
 
    } else { 
 
     colorChecked = $('input[name="color"]:checked').val(); 
 
     formChecked = this.value; 
 
    } 
 

 
    $('#image').stop().fadeOut(200, function() { 
 
     $(this).attr('src', images[formChecked][colorChecked]); 
 
    }).fadeIn(200); 
 
    }); 
 
});

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

 

 
<form action=""> 
 
    <input type="radio" name="color" value="silver"> silver 
 
    <br> 
 
    <input type="radio" name="color" value="gold"> gold 
 
    <br> 
 
    <input type="radio" name="color" value="platin"> platin 
 
    <br> <br> 
 

 
    <input type="radio" name="form" value="round"> round 
 
    <br> 
 
    <input type="radio" name="form" value="oval"> oval 
 
    <br> 
 

 
</form> 
 

 
<div><img id="image" src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=38201084"></div>

來源

2016-07-28 20:57:08 gaetanoM

非常感謝你！但無論如何，檢查圓形或橢圓形時都不會發生任何事情。只有顏色才能更改圖像。 – MrSocrathes

@MrSocrathes Snippet已更新。 – gaetanoM

jQuery語法的條件邏輯與單選按鈕？

回答

相關問題