Jquery : Swap Two Value And Change Style

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 wh

Solution 1:

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: ""};

functionremoveSelectionWithRed() {
   $('div').removeClass('red'); 
}

functionselectWithRed(element) {
    removeSelectionWithRed();
    element.addClass('red');
}

functionupdateSelectedCase(color, id) {
    selectedCase.color = color;
    selectedCase.id = id;
}

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

functionsetValueToElem(value, elem) {
    elem.html(value);
}

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

functionisSelected(color) {
    return selectedCase.color == color;
}

functionclearSelectedCase() {
    selectedCase.color = "";
    selectedCase.id = "";
}

functionelemIsEmpty(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 to jsfiddle: https://jsfiddle.net/12gwq95u/21/

If my answers were helpful, please up them.

Solution 2:

It happens because you have multiple $(".whitecase").click() handlers and they don't override each other but instead they all execute in the order in which they were bound.

I advise you to debug your code in browser console by setting breakpoints in every click() event you have (in browser console you can find your file by navigating to the Sources tab and then (index) file in the first folder in fiddle.jshell.net).

In general I think you should rewrite you code in such a way that you won't have multiple handlers to the same events and you can be absolutely sure what your code does.