javascript - 无法将变量的值从 true 更改为 false

Question

现在更新，我发现我需要暂时禁用函数更改，所以我启用了 var 并使函数仅在 var enabled == true 时可用，最后在我传递的函数 enabled = false; 中，它应该在第一次后禁用函数 change();，但它仍然可以正常工作。有人可以帮我吗？

//This function will give me the ID of the images, so i can make my conditions according to the ID
var enabled = true;

function pegaId(obj){
    var idCorreto = obj.getAttribute('id');
    return idCorreto;
}

if(enabled == true){
function drag(obj){
    var zIndexImg = 0;
    //with the var id, i detect which image is being dragged by the id
    var id = obj.getAttribute('id');

    var img = document.getElementById(id);
    var imgPositionLeft = img.offsetLeft;
    var imgPositionTop = img.offsetTop;

        img.ondragstart = function(){
            return false;
        };

        function dropImage(e){
            img.style.transition = "";
            img.style.zIndex = zIndexImg++;

            //make the drag of the imgs
            img.style.top = e.clientY - imgPositionTop +'px';
            img.style.left = e.clientX - imgPositionLeft + 'px';

            console.log(e.clientX - imgPositionLeft);
        }

function change(id1,id2,div1,div2){
//this function will make the change of the imgs                
    img.removeAttribute('style');

    //i put the imgs and the divs they are kept in these vars
    var imgDiv = document.getElementById(div1);
    var imgDiv_2 = document.getElementById(div2);
    var imgId = document.getElementById(id1);
    var imgId2 = document.getElementById(id2);

    //take the id of both imgs
    var getId = imgId.getAttribute('id');
    var getId2 = imgId2.getAttribute('id');

    //and change the id's
    imgId.setAttribute('id',getId2);
    imgId2.setAttribute('id',getId);

//and overwrite the imgs in the divs, making the change
imgDiv.innerHTML = imgId2.cloneNode().outerHTML;
imgDiv_2.innerHTML = imgId.cloneNode().outerHTML;
            }

function drop(e){
//this function is for the drop of the img
    dropImage(e);
    //remove the added events
document.removeEventListener('mousemove' ,dropImage);
            document.removeEventListener('mouseup', drop);

//find out which image is clicked so i can make the right change
if(img.style.left >= '90px' && img.style.left <= '130px'){
    //take the ID so i know which image are being dragged
    if(pegaId(obj) == 'teste1'){

        //and make the change
        change("teste1","teste2","img1","img2");

    }else if(pegaId(obj) == 'teste2'){
        change("teste2","teste3","img2","img3");                
    }

}

if(img.style.left >= '230px' && img.style.left <= '250px'){
                change("teste1","teste3","img1","img3");

}
if(img.style.left >= '-115px' && img.style.left <= '-130px'){

    if(pegaId(obj) == 'teste3'){
        change("teste2","teste3","img2","img3");                            
    }
    else if(pegaId(obj) == 'teste2'){
        change("teste2","teste1","img2","img1");                
    }
            }

if(img.style.left >= '-225px' && img.style.left <= '-250px'){
        change("teste1","teste3","img1","img3");            
    }

//reset the values after the change
img.style.left = '0px';
img.style.top = '0px';
}

//add the events again when the img is clicked
img.addEventListener('mousedown', function(){
            document.addEventListener('mousemove', dropImage);
            document.addEventListener('mouseup', drop);
        });
}
    enabled = false;
}

http://jsfiddle.net/m8vvhf8e/3/

Answer 1

我发现我的问题是我在更改图像的同一个函数中更改了 ID，这给函数带来了一些麻烦。我能够通过在一个函数中更改图像并在另一个函数中更改 ID 来解决问题:

//function to change the imgs places
            function change(id1,id2,div1,div2){

                img.removeAttribute('style');

                var imgDiv = document.getElementById(div1);
                var imgDiv_2 = document.getElementById(div2);
                var imgId = document.getElementById(id1);
                var imgId2 = document.getElementById(id2);

                imgDiv.innerHTML = imgId2.cloneNode().outerHTML;
                imgDiv_2.innerHTML = imgId.cloneNode().outerHTML;
}

//function to change the imgs id's
            function trocaId(id1,id2){
                var id_1 = document.getElementById(id1);
                var id_2 = document.getElementById(id2);

                    id_1.setAttribute('id',id2);
                    id_2.setAttribute('id',id1);
                }

//making the changes

            if(img.style.left >= '250px' && img.style.left <= '290px'){
                if(pegaId(obj) == 'teste1'){
                    change("teste1","teste2","img1","img2");
                    trocaId("teste1","teste2");
                }else if(pegaId(obj) == 'teste2'){
                    change("teste2","teste3","img2","img3");
                    trocaId("teste2","teste3");
                }

http://jsfiddle.net/v1u1xnwj/10/