OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Adding style property to individual class elements on click, IF their data is modified

  • Thread starter Thread starter frozen dwarf
  • Start date Start date
F

frozen dwarf

Guest
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.

Code:
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.

Code:
$(".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.

Code:
$(".clothes").click(function() {
    .clothes img.style.display = "block" !important;
}

(To see the code in action, https://pixis.neocities.org/dressup/meliextra)

<p>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.</p>
<pre><code>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.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.className = btn.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";
}
</code></pre>
<p>I also have a button that resets items to their original position when clicked.</p>
<pre><code>$(".clothes").data({
'originalLeft': $(".clothes").css('left'),
'origionalTop': $(".clothes").css('top')
});

$("#reset").click(function() {
$(".clothes").css({
'left': $(".clothes").data('originalLeft'),
'top': $(".clothes").data('origionalTop')
});
});
</code></pre>
<p><strong>My problem is that, when switching between tabs, the items get hidden, even if they're moved onto the doll.</strong></p>
<p><strong>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.</strong></p>
<p>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.</p>
<p>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.</p>
<pre><code>$(".clothes").click(function() {
.clothes img.style.display = "block" !important;
}
</code></pre>
<p>(To see the code in action, <a href="https://pixis.neocities.org/dressup/meliextra" rel="nofollow noreferrer">https://pixis.neocities.org/dressup/meliextra</a>)</p>
 

Latest posts

Top