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.
JavaScript
x
81
81
1
<html>2
3
<head>4
<title>Doll</title>5
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>6
<style type="text/css">7
#penguinDoll {8
background-color: #003366;9
}10
#palletes {11
width: 332px;12
}13
#penguinColorName {14
color: #000;15
font-weight: bold;16
font-family: Arial, Helvetica, sans-serif;17
font-size: medium;18
}19
.tinyPallete {20
border: 2px solid #000;21
border-radius: 5px;22
width: 40px;23
height: 40px;24
display: inline-block;25
cursor: pointer;26
}27
.tinyPallete:hover {28
border: 2px solid #f6bd56;29
30
}31
</style>32
<script type="text/javascript">33
function loadPalletes() {34
let colorIndexNum = 0;35
for(let palletes in penguinColors) {36
let colorHex = penguinColors[palletes],37
colorIndex = palletes, colorIndexCurrNum = ++colorIndexNum;38
39
$('#palletes').append(`<div onclick="selectPallete('${colorHex}', '${colorIndex}', ${colorIndexCurrNum});" class="tinyPallete" style="background: #${colorHex}"></div> `);40
}41
}42
43
function selectPallete(colorHex, colorName, currIndex) {44
//colorSelected = true;45
//$(this).css('border', '2px solid #f6bd56');46
$("#penguinColorName").text(colorName);47
$("#penguinDoll").css('background-color', colorHex);48
}49
50
//let colorSelected = false;51
let penguinColors = {52
"Blue": "003366",53
"Green": "009900",54
"Pink": "FF3399",55
"Black": "333333",56
"Orange": "FF6600",57
"Yellow": "FFCC00",58
"Dark Purple": "660099",59
"Brown": "996600",60
"Red": "ff6666",61
"Dark Green": "006600",62
"Light Blue": "0099CC",63
"Lime Green": "8AE302",64
"Gray": "93A0A4",65
"Aqua": "02A797",66
"Arctic White": "F0F0D8"67
};68
</script>69
</head>70
71
<body onload="loadPalletes();">72
<div id="form">73
<div id="penguinColorName"></div>74
<img id="penguinDoll" src="C:/Users/BossH/Downloads/doll.png">75
<div id="palletes"></div>76
</div>77
</body>78
79
</html>80
81
If anyone can give me some pointers on a good approach for this that would be much appreciated,
Advertisement
Answer
JavaScript
1
84
84
1
<html>2
3
<head>4
<title>Doll</title>5
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>6
<style type="text/css">7
#penguinDoll {8
background-color: #003366;9
}10
#palletes {11
width: 332px;12
}13
#penguinColorName {14
color: #000;15
font-weight: bold;16
font-family: Arial, Helvetica, sans-serif;17
font-size: medium;18
}19
.tinyPallete {20
border: 2px solid #000;21
border-radius: 5px;22
width: 40px;23
height: 40px;24
display: inline-block;25
cursor: pointer;26
}27
.tinyPallete.active {28
border: 2px solid #f6bd56;29
}30
.tinyPallete:hover {31
border: 2px solid #f6bd56;32
33
}34
</style>35
<script type="text/javascript">36
function loadPalletes() {37
let colorIndexNum = 0;38
for(let palletes in penguinColors) {39
let colorHex = penguinColors[palletes],40
colorIndex = palletes, colorIndexCurrNum = ++colorIndexNum;41
42
$('#palletes').append(`<div onclick="selectPallete('${colorHex}', '${colorIndex}', ${colorIndexCurrNum}, this);" class="tinyPallete" style="background: #${colorHex}"></div> `);43
}44
}45
46
function selectPallete(colorHex, colorName, currIndex,id) {47
//colorSelected = true;48
49
$('.tinyPallete').removeClass('active');50
$(id).addClass('active');51
$("#penguinColorName").text(colorName);52
$("#penguinDoll").css('background-color', colorHex);53
}54
55
//let colorSelected = false;56
let penguinColors = {57
"Blue": "003366",58
"Green": "009900",59
"Pink": "FF3399",60
"Black": "333333",61
"Orange": "FF6600",62
"Yellow": "FFCC00",63
"Dark Purple": "660099",64
"Brown": "996600",65
"Red": "ff6666",66
"Dark Green": "006600",67
"Light Blue": "0099CC",68
"Lime Green": "8AE302",69
"Gray": "93A0A4",70
"Aqua": "02A797",71
"Arctic White": "F0F0D8"72
};73
</script>74
</head>75
76
<body onload="loadPalletes();">77
<div id="form">78
<div id="penguinColorName"></div>79
<img id="penguinDoll" src="C:/Users/BossH/Downloads/doll.png">80
<div id="palletes"></div>81
</div>82
</body>83
84
</html>set active class on selected item and remove other item active class