2012-07-30 93 views
0

我有一個問題,我正在顯示一輛汽車,我希望用戶能夠更改汽車的顏色以及輪輞。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 --> 

因此,切換汽車的顏色以及輪輞。但是如果我選擇一種顏色,那麼當我去選擇一個邊框時,顏色會默認回到原始圖像。有沒有什麼辦法在選擇輪輞時選擇顏色?

+0

你聲明'showImage'和'toggleThumbnails'功能的兩倍。嘗試給他們不同的名字。 – hradac 2012-07-30 20:05:38

回答

1

您對不同的函數使用了相同的函數名兩次,並且使瀏覽器混淆不清。嘗試改變函數名類似:

function changeColor() 
function toggleColorThumbnails() 

function changeRim() 
function toggleRimThumbnails()