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

Question

我需要通过单击（变红）为 select 制作一个黑色 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 的白色盒，值与红色正确交换select 时的颜色，但如果您尝试重新交换两个白色值，那是可行的，但没有红色。

非常感谢

Answer 1

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

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

中的文件夹

总的来说，我认为您应该以这样一种方式重写您的代码，即您不会对同一事件有多个处理程序，并且您可以绝对确定您的代码的作用。

Answer 2

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

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

Link 到 jsfiddle：https://jsfiddle.net/12gwq95u/21/

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

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

Jquery : swap two value and change style

javascript

jquery

swap