Javascript 未正确填充输入值

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 设置选项，而是通过实际将值放入隐藏的输入元素来设置默认选项。

以后可以用JS改。