全局变量更改后功能仍然有效答案

【问题标题】：function still working after global variable change全局变量更改后功能仍然有效
【发布时间】：2023-03-05 07:06:01
【问题描述】：

好的，我有代码：

$(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;
            }
        }
    });
}   
});

我分配了一个全局变量 var selected = 0;

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

由于某种原因，当我单击 .color div 时，选定的值更改为 1，但该函数仍然像值是 0。所以在页面上 var selected 设置为 1，但 if 的第一部分声明仍然有效。我认为不应该，因为我已经通过点击更改了全局变量。

【问题讨论】：

标签： jquery html

【解决方案1】：

您正在根据selected 的值将您的点击事件绑定到准备好的文档上——只有代码中的第一个点击事件才会绑定到该元素，因为初始值为零。您需要将逻辑移到 click 函数中，以便每次函数运行时都会检查该值：

$(document).ready(function(){

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

});

【讨论】：

谢谢，还有一些调整，但成功了。