Question

我为我的网站建立商店，在商品页面上有颜色选项。点击颜色选项，它会更改照片，以便向用户显示，并且隐藏输入的值应该使用所选颜色更新，但我无法正常工作

在$(document).ready(function()我有Javascript填充输入的值，但它只能偶尔使用，不常用。在我看来，代码似乎应该有效。我现在还不确定我错过了什么或做错了什么。

这是代码

头脑中：

<script type="text/javascript">

    function color(option) {
        document.getElementById('photo').src = '../img/tshirts/shirts/' + option + '.jpg';
        document.getElementById('item-color').value = option;
    }

</script>

身体：

<div id="photo-wrapper">
    <img id="photo" src="../img/tshirts/shirts/charcoal-black.jpg" />
    <input type="hidden" id="item-color" name="item-color" value="charcoal-black" />
    <div id="colors">
        <a href="javascript:color('aqua');"><img class="swatch" src="../img/tshirts/swatches/aqua.png" title="Aqua"/></a>
        <a href="javascript:color('athletic-grey');"><img class="swatch" src="../img/tshirts/swatches/athletic-grey.png" title="Athletic Grey"/></a>
        <a href="javascript:color('berry');"><img class="swatch" src="../img/tshirts/swatches/berry.png" title="Berry"/></a>
        <a href="javascript:color('blue');"><img class="swatch" src="../img/tshirts/swatches/blue.png" title="Blue"/></a>
        <a href="javascript:color('brown');"><img class="swatch" src="../img/tshirts/swatches/brown.png" title="Brown"/></a>
        <a href="javascript:color('charcoal-black');"><img class="swatch" src="../img/tshirts/swatches/charcoal-black.png" title="Charcoal Black"/></a>
        <a href="javascript:color('clay');"><img class="swatch" src="../img/tshirts/swatches/clay.png" title="Clay"/></a>
        <a href="javascript:color('emerald');"><img class="swatch" src="../img/tshirts/swatches/emerald.png" title="Emerald"/></a>
        <a href="javascript:color('green');"><img class="swatch" src="../img/tshirts/swatches/green.png" title="Green"/></a>
        <a href="javascript:color('grey');"><img class="swatch" src="../img/tshirts/swatches/grey.png" title="Grey"/></a>
        <a href="javascript:color('maroon');"><img class="swatch" src="../img/tshirts/swatches/maroon.png" title="Maroon"/></a>
        <a href="javascript:color('navy');"><img class="swatch" src="../img/tshirts/swatches/navy.png" title="Navy"/></a>
        <a href="javascript:color('orange');"><img class="swatch" src="../img/tshirts/swatches/orange.png" title="Orange"/></a>
        <a href="javascript:color('purple');"><img class="swatch" src="../img/tshirts/swatches/purple.png" title="Purple"/></a>
        <a href="javascript:color('red');"><img class="swatch" src="../img/tshirts/swatches/red.png" title="Red"/></a>
        <a href="javascript:color('solid-black');"><img class="swatch" src="../img/tshirts/swatches/solid-black.png" title="Solid Black"/></a>
        <a href="javascript:color('teal');"><img class="swatch" src="../img/tshirts/swatches/teal.png" title="Teal"/></a>
        <a href="javascript:color('true-royal');"><img class="swatch" src="../img/tshirts/swatches/true-royal.png" title="True Royal"/></a>
    </div>
</div>

Answer 1

我希望能为您节省大量时间，不要通过JavaScript设置选项，通过实际将值放在隐藏的输入元素中来设置DEFAULT选项。

您可以稍后使用JS更改它。

Javascript没有正确填充输入值

1 个答案: