函數全局變量變化後仍然工作

Question

確定我的代碼：

$(document).ready(function(){ 
if(selected == 0){ 
    $(".color").mouseover(function(){ 
     var image = $(this).children('img').attr('src'); 
     $(this).children('img').css("border", "2px solid #000000"); 
     $("#itemMainImg").attr("src", image); 
    }); 
    $(".color").mouseout(function(){ 
     $(this).children('img').css("border", "none"); 
    }) 
    $(".color").click(function(){ 
     var image = $(this).children('img').attr('src'); 
     console.log("worked"); 
     $("#itemMainImg").attr("src", image); 
     $(this).children('img').css("border", "2px solid #000000"); 
     selected = 1; 
     console.log(selected); 
     colorSelected = $(this).children('img').attr('src'); 
    }); 
} 
else{ 
    $(".color").click(function(){ 
     var image = $(this).children('img').attr('src'); 
     if(image == colorSelected){ 
      $("#itemMainImg").attr("src", image); 
      if($(this).children('img').css("border") == "none"){ 
       $(this).children('img').css("border","2px solid #000000"); 
      } 
      else{ 
       $(this).children('img').css("border", "none"); 
       selected = 0; 
      } 
     } 
    }); 
} 
}); 

我有一個全局變量分配無功選定= 0;

and var colorSelected =「」;

的HTML如下：

<div id="itemHead"> 
<div id="itemMain"> 
    <h1 id="itemH1">Demo Item by Demo</h1> 
    <img id="itemMainImg" src="photos/Carpets/ApolloBoxwood - Copy.jpg"> 
</div> 
<div id="itemColors"> 
    <div> 
     <p id="colorsP">Available Colours</p> 
    </div> 
    <div> 
     <div class="color"> 
      <img class="colorImg" src="photos/Carpets/ApolloBoxwood - Copy.JPG" alt="Apollo Plus Boxwood"> 
      <p class="colorPara">Boxwood</p> 
     </div> 
     <div class="color"> 
      <img class="colorImg" src="photos/Carpets/ApolloCinderGrey - Copy.JPG" alt="Apollo Plus Cinder Grey"> 
      <p class="colorPara">Cinder Grey</p> 
     </div> 
     <div class="color"> 
      <img class="colorImg" src="photos/Carpets/ApolloCorkOak - Copy.JPG" alt="Apollo Plus Cork Oak"> 
      <p class="colorPara">Cork oak</p> 
     </div> 
    </div>  
</div> 

，當我點擊。顏色某些原因的div選擇的值更改爲1，但功能依然就像值爲0 。所以在頁面var選擇設置爲1，但if語句的第一部分仍然有效。我不認爲這應該是因爲我已經通過點擊更改了全局變量。

Answer 1

根據selected的值，您正在綁定文檔準備就緒的單擊事件 - 只有您的代碼中的第一個單擊事件將被綁定到元素，因爲初始值爲零。您需要將邏輯移入點擊函數，以便每次運行函數時都檢查該值：

$(document).ready(function(){ 

    $(".color").click(function(){ 
     if(selected == 0){ 
      /* do something if value is zero */ 
     } else { 
      /* do something if value is NOT zero */ 
     } 
    }); 

});