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）。

一般来说，我认为您应该以这样的方式重写代码，使得您不会有多个处理程序来处理相同的事件，并且您可以完全确定代码的作用。

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

2 个答案: