jQuery 숨겨진/표시 문제

Question

나는 차를 표시하는 데 문제가 있으며 사용자가 차와 림의 색상을 변경할 수있게하려고합니다.

 <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 --> 

그래서 바퀴와 바퀴의 색상을 토글합니다. 그러나 색상을 선택한 다음 테두리를 선택하면 색상이 원래 이미지로 되돌아갑니다. 테두리를 선택할 때 색상을 선택하는 방법이 있습니까?

Answer 1

다른 기능에 대해 동일한 기능 이름을 두 번 사용하고 브라우저를 혼동합니다. 같은 뭔가 함수 이름을 변경해보십시오 :

function changeColor() 
function toggleColorThumbnails() 

및

function changeRim() 
function toggleRimThumbnails()