I’m trying to make a browser dress up game with separate tabs for draggable items (so tops, bottoms, etc). This is the JavaScript code for how the tabs function.
function openTab(event, Category) {
var i, tabcontent, btn;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="btn" and remove the class "active"
btn = document.getElementsByClassName("btn");
for (i = 0; i < btn.length; i++) {
btn[i].className = btn[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(Category).style.display = "block";
evt.currentTarget.className += " active";
}
I also have a button that resets items to their original position when clicked.
$(".clothes").data({
'originalLeft': $(".clothes").css('left'),
'origionalTop': $(".clothes").css('top')
});
$("#reset").click(function() {
$(".clothes").css({
'left': $(".clothes").data('originalLeft'),
'top': $(".clothes").data('origionalTop')
});
});
My problem is that, when switching between tabs, the items get hidden, even if they’re moved onto the doll.
So my solution would be to add style.display = "block" !important
to .clothes
if their original position is modified and remove this style property when the #reset
button is clicked.
But I’m having a difficult time understanding JavaScript, so I don’t know how to actually write that or how to search for a similar scenario and use that code.
This is what I tried, but it just breaks. And I don’t want it to affect all .clothes
items, just those that were moved, or at least clicked.
$(".clothes").click(function() {
.clothes img.style.display = "block" !important;
}
(To see the code in action, https://pixis.neocities.org/dressup/meliextra)