Unselect last pallet when selecting a new Pallet

I’ve been kind of stuck on this for a little bit and im in need of some assistance. I’m trying to make it where when I select a pallet it unselects the last selected pallet then selects the new one. I had an idea to do it but I feel like there’s a more efficient way going about this.

<html>

<head>
    <title>Doll</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
    #penguinDoll {
        background-color: #003366;
    }
    #palletes {
        width: 332px;
    }
    #penguinColorName {
        color: #000;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
    }
    .tinyPallete {
        border: 2px solid #000;
        border-radius: 5px;
        width: 40px;
        height: 40px;
        display: inline-block;
        cursor: pointer;
    }
    .tinyPallete:hover {
        border: 2px solid #f6bd56;

    }
    </style>
    <script type="text/javascript">
    function loadPalletes() {
        let colorIndexNum = 0;
        for(let palletes in penguinColors) {
            let colorHex = penguinColors[palletes],
                colorIndex = palletes, colorIndexCurrNum = ++colorIndexNum;
        
            $('#palletes').append(`<div onclick="selectPallete('${colorHex}', '${colorIndex}', ${colorIndexCurrNum});" class="tinyPallete" style="background: #${colorHex}"></div> `);
        }
    }

    function selectPallete(colorHex, colorName, currIndex) {
        //colorSelected = true;
        //$(this).css('border', '2px solid #f6bd56');
        $("#penguinColorName").text(colorName);
        $("#penguinDoll").css('background-color', colorHex);
    }
    
    //let colorSelected = false;
    let penguinColors = {
        "Blue": "003366",
        "Green": "009900",
        "Pink": "FF3399",
        "Black": "333333",
        "Orange": "FF6600",
        "Yellow": "FFCC00",
        "Dark Purple": "660099",
        "Brown": "996600",
        "Red": "ff6666",
        "Dark Green": "006600",
        "Light Blue": "0099CC",
        "Lime Green": "8AE302",
        "Gray": "93A0A4",
        "Aqua": "02A797",
        "Arctic White": "F0F0D8"
    };
    </script>
</head>

<body onload="loadPalletes();">
    <div id="form">
        <div id="penguinColorName"></div>
        <img id="penguinDoll" src="C:/Users/BossH/Downloads/doll.png">
        <div id="palletes"></div>
    </div>
</body>

</html>

If anyone can give me some pointers on a good approach for this that would be much appreciated,

Answer

<html>

<head>
    <title>Doll</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
    #penguinDoll {
        background-color: #003366;
    }
    #palletes {
        width: 332px;
    }
    #penguinColorName {
        color: #000;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
    }
    .tinyPallete {
        border: 2px solid #000;
        border-radius: 5px;
        width: 40px;
        height: 40px;
        display: inline-block;
        cursor: pointer;
    }
    .tinyPallete.active {
        border: 2px solid #f6bd56;
    }
    .tinyPallete:hover {
        border: 2px solid #f6bd56;

    }
    </style>
    <script type="text/javascript">
    function loadPalletes() {
        let colorIndexNum = 0;
        for(let palletes in penguinColors) {
            let colorHex = penguinColors[palletes],
                colorIndex = palletes, colorIndexCurrNum = ++colorIndexNum;
        
            $('#palletes').append(`<div onclick="selectPallete('${colorHex}', '${colorIndex}', ${colorIndexCurrNum}, this);" class="tinyPallete" style="background: #${colorHex}"></div> `);
        }
    }

    function selectPallete(colorHex, colorName, currIndex,id) {
        //colorSelected = true;
        
        $('.tinyPallete').removeClass('active');
        $(id).addClass('active');
        $("#penguinColorName").text(colorName);
        $("#penguinDoll").css('background-color', colorHex);
    }
    
    //let colorSelected = false;
    let penguinColors = {
        "Blue": "003366",
        "Green": "009900",
        "Pink": "FF3399",
        "Black": "333333",
        "Orange": "FF6600",
        "Yellow": "FFCC00",
        "Dark Purple": "660099",
        "Brown": "996600",
        "Red": "ff6666",
        "Dark Green": "006600",
        "Light Blue": "0099CC",
        "Lime Green": "8AE302",
        "Gray": "93A0A4",
        "Aqua": "02A797",
        "Arctic White": "F0F0D8"
    };
    </script>
</head>

<body onload="loadPalletes();">
    <div id="form">
        <div id="penguinColorName"></div>
        <img id="penguinDoll" src="C:/Users/BossH/Downloads/doll.png">
        <div id="palletes"></div>
    </div>
</body>

</html>

set active class on selected item and remove other item active class

Advertisement

Answer