jQuery:交换两个值并更改样式 [英] Jquery : swap two value and change style

问题描述

我需要制作一个脚本来通过单击(变为红色)选择黑色div，然后通过再次单击将黑色div值转换为白色div值，这是可以的，但是当我尝试交换两个白色大小写的值时，更改一次可以正确执行一次，但是如果我尝试交换两个白色情况下的值，则这些值可以正确交换，但是背景颜色变成红色.

i need to make a script for select a black div by click(go red), and put black div value into a white div value by another click, this is ok but when i try to swap values of two white case, the change do correctly one time, but if i retry to swap two value of white case the values swap correctly but whitout the background color red.

这是我的代码:

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/

This is JSfiddle : https://jsfiddle.net/12gwq95u/12/

尝试取12并放入第一个白色盒中，将39放入第二个白色盒中，单击带有12的白色盒(变成红色)，然后单击带有39的白色盒，当它是选择的，但是如果您尝试重新交换两个白色字符值，那是可行的，但是没有红色.

Try to take 12 and put into first white case, put 39 into second white case, click on the white case with 12 (go red) then click on the white case with 39, the values swap correctly with the red color when it's select, but if you try to reswap two whitecase values thats work but without the red color.

非常感谢

推荐答案

我花了一些时间重写您的代码以使其更加清晰.我不知道您的代码应该做什么，但是根据您已经提供的信息，我的代码如下:

I have spent some time to rewrite your code to make it more clear. I don't know what exactly your code should do but according to the information you have already provided, my version of your code is the following:

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/

Link to jsfiddle: https://jsfiddle.net/12gwq95u/21/

如果我的回答有帮助，请提高答案.

If my answers were helpful, please up them.

这篇关于jQuery:交换两个值并更改样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！