Jquery：交换两个值并更改样式

Question

我需要编写一个脚本来通过单击（变为红色）选择黑色 div，并通过另一次单击将黑色 div 值放入白色 div 值，这没关系，但是当我尝试交换两个白色大小写的值时，更改一次正确，但如果我重试交换两个白色大小写值，则值正确交换，但背景颜色为红色。

这是我的代码：

var lastClicked = '';
var lastClicked2 = '';

$(".blackcase").click(function(e) {
    var i = 0;
    if ($(this).html().length == 0) {
        return false;
    } else {
        e.preventDefault();
        $('.blackcase').removeClass('red');

        if (lastClicked != this.id) {
            $(this).addClass('red');
            var currentId = $(this).attr('id');
            var currentVal = $(this).html();

            $(".whitecase").click(function(e) {
                $('.blackcase').removeClass('red');
                var currentId2 = $(this).attr('id');

                if (i <= 0 && $("#" + currentId2).html().length == 0) {
                    $("#" + currentId2).html(currentVal);
                    $("#" + currentId).html("");
                    i = 1;
                }
            });
        } else {
            lastClicked = this.id;
        }
    }
});

$(".whitecase").click(function(e) {
    var j = 0;
    if ($(this).html().length == 0) {
        return false;
    } else {
        e.preventDefault();
        $('.whitecase').removeClass('red');

        if (lastClicked2 != this.id) {
            $(this).addClass('red');
            var currentId0 = $(this).attr('id');
            var currentVal0 = $(this).html();

            $(".whitecase").click(function(e) {
                e.preventDefault();
                var currentId02 = $(this).attr('id');
                var currentVal02 = $(this).html();

                if (j <= 0 && currentVal0 != currentVal02) {
                    $('.whitecase').removeClass('red');
                    $("#" + currentId02).html(currentVal0);
                    $("#" + currentId0).html(currentVal02);
                    j = 1;

                    return false;
                }
            });
        } else {
            lastClicked2 = this.id;
        }
    }
});

这是 JSfiddle ： https://jsfiddle.net/12gwq95u/12/

尝试将 12 放入第一个白盒中，将 39 放入第二个白盒中，单击带有 12 的白盒（变为红色），然后单击带有 39 的白盒，此时值与红色正确交换它是选择的，但是如果您尝试重新交换两个白色值，那是可行的，但没有红色。

非常感谢

Answer 1

我花了一些时间重写您的代码以使其更清晰。我不知道你的代码到底应该做什么，但根据你已经提供的信息，我的代码版本如下：

var selectedCase = {color: "", id: ""};

function removeSelectionWithRed() {
   $('div').removeClass('red'); 
}

function selectWithRed(element) {
    removeSelectionWithRed();
    element.addClass('red');
}

function updateSelectedCase(color, id) {
    selectedCase.color = color;
    selectedCase.id = id;
}

function moveValueFromTo(elemFrom, elemTo) {
    elemTo.html(elemFrom.html());
    setValueToElem("", elemFrom);
}

function setValueToElem(value, elem) {
    elem.html(value);
}

function swapValuesFromTo(elemFrom, elemTo) {
    var fromValue = elemFrom.html();
    var toValue = elemTo.html();
    setValueToElem(fromValue, elemTo);
    setValueToElem(toValue, elemFrom);
}

function isSelected(color) {
    return selectedCase.color == color;
}

function clearSelectedCase() {
    selectedCase.color = "";
    selectedCase.id = "";
}

function elemIsEmpty(elem) {
   return elem.html().length == 0;
}

$(".blackcase").click(function (e) {
    if (elemIsEmpty($(this))) {
        return;
    }

    alert("black is selected");
    selectWithRed($(this));
    updateSelectedCase("black", $(this).attr("id"), $(this).html());
});

$(".whitecase").click(function (e) {    
    removeSelectionWithRed();

    if (isSelected("black")) {
        alert("moving black to white");

        moveValueFromTo($("#"+selectedCase.id), $(this));

        clearSelectedCase();
        return;
    }

    if(isSelected("white") && selectedCase.id !== $(this).attr("id")) {
        alert("swap whitecase values");

        swapValuesFromTo($("#"+selectedCase.id), $(this));

        clearSelectedCase();
        return;
    }

    alert("white is selected");
    selectWithRed($(this));
    updateSelectedCase("white", $(this).attr("id"), $(this).html());
});

jsfiddle 链接：https://jsfiddle.net/12gwq95u/21/

如果我的回答对你有帮助，请顶一下。

Answer 2

发生这种情况是因为您有多个 $(".whitecase").click() 处理程序并且它们不会相互覆盖，而是它们都按照它们被绑定的顺序执行。

我建议您通过在您拥有的每个 click() 事件中设置断点来在浏览器控制台中调试您的代码（在浏览器控制台中，您可以通过导航到 Sources 选项卡，然后在第一个文件夹中的（索引）文件中找到您的文件fiddle.jshell.net）。

总的来说，我认为您应该重写代码，这样您就不会有多个处理相同事件的处理程序，并且您可以绝对确定您的代码是做什么的。