Javascript jQuery隐藏/显示问题

我有一个问题，我显示一辆车，我希望用户能够改变颜色的汽车以及轮辋

       <script type="text/javascript">
            function showImage(image){
              var mainImage = document.getElementById('mainImage');
              mainImage.src = image; 
            }
            function toggleThumbnails(){
              var thumbnails = document.getElementById('color-options');
              if(thumbnails.style.display == 'block'){
                thumbnails.style.display = 'none'; 
              } else {
                thumbnails.style.display = 'block'; 
              }
            }

                function showImage(image){
              var mainImage = document.getElementById('mainwheelImage');
              mainImage.src = image; 
            }
            function toggleThumbnails(){
              var thumbnails = document.getElementById('wheel-options');
              if(thumbnails.style.display == 'block'){
                thumbnails.style.display = 'none'; 
              } else {
                thumbnails.style.display = 'block'; 
              }
            }
        </script>

<section id="footer-wrapper">
                <!-- Color Selector -->
                <div id="color-options">
                    <h1>Colors</h1>
                    <div class="color-container">
                        <div class="color-center">
                            <span><img src="img/colors/black.png" onclick="showImage('img/colors/cars/black.png')" /></span>
                            <span><img src="img/colors/white.png" onclick="showImage('img/colors/cars/white.png')" /></span>
                            <span><img src="img/colors/red.png" onclick="showImage('img/colors/cars/red.png')" /></span>
                            <span><img src="img/colors/silver.png" onclick="showImage('img/colors/cars/silver.png')" /></span>
                            <span><img src="img/colors/metalic_black.png" onclick="showImage('img/colors/cars/metalic_black.png')" /></span>
                            <span><img src="img/colors/metalic_grey.png" onclick="showImage('img/colors/cars/metalic_grey.png')" /></span>
                        </div>
                    </div>
                </div>
                <!-- /Color Selector -->
                <div class="divider"></div>
                <!-- Wheels Selector -->
                <div id="wheel-options">
                    <h1>Wheels</h1>
                    <div class="wheel-container">
                        <div class="wheel-center">
                            <span><img src="img/wheels/17.jpg" onclick="showImage('img/wheels/cars_overlay/17.png')" /></span>
                            <span><img src="img/wheels/18.jpg" onclick="showImage('img/wheels/cars_overlay/18_regular.png')"  /></span>
                            <span><img src="img/wheels/18_twin.jpg" onclick="showImage('img/wheels/cars_overlay/18_twin.png')" /></span>
                            <span><img src="img/wheels/18_twin_7spoke.jpg" /></span>
                        </div>
                    </div>
                </div>
                <!-- /Wheels Selector -->

函数showImage（图像）{
var mainImage=document.getElementById（'mainImage'）；
mainImage.src=图像；
}
函数切换缩略图（）{
var thumbnails=document.getElementById（'color-options'）；
if（thumbnails.style.display=='block'）{
thumbnails.style.display='none'；
}否则{
thumbnails.style.display='block'；
}
}
函数showImage（图像）{
var mainImage=document.getElementById（'mainwheelImage'）；
mainImage.src=图像；
}
函数切换缩略图（）{
var thumbnails=document.getElementById（'wheel-options'）；
if（thumbnails.style.display=='block'）{
thumbnails.style.display='none'；
}否则{
thumbnails.style.display='block'；
}
}
颜色
车轮

---

这样可以切换汽车和轮辋的颜色。但是如果我选择了一种颜色，那么当我选择一个边缘时，颜色默认回到原始图像。在选择轮辋时，有没有办法保持颜色处于选定状态？

您对不同的功能使用了两次相同的功能名称，这会使浏览器感到困惑。尝试将函数名更改为类似以下内容：

function changeColor()
function toggleColorThumbnails()

及

---

您两次声明了

showImage

和

toggleThumbnails

函数。试着给他们起不同的名字。

function changeRim()
function toggleRimThumbnails()