jane jane - 13 days ago 7
CSS Question

javascript to show or hide a class according to a condition

In this website : website

when you scroll down to the badge section,

I have two conditions for badges :(below are the two badges)

unlocked badge
locked badge

Issue :

when the count (which appears on the upper right side of the badge as "10" and "0" here) is greater than "0" then "unlocked with check mark" should be displayed else "locked with cross" should be dispalyed and it should be faded as in hover effect we see normally.

javascript as suggested in the community : (in the fiddle its in the html section with a comment)



$.each($('.Portfolio-box'), function() {
var count = $(this).children('has-badge').attr('data-count');
if (data - count > 0) {
$(this).children('ul.locked').hide();
$(this).children('ul.unlocked').show();
} else {
$(this).children('ul.locked').show();
$(this).children('ul.unlocked').hide();
}
});





Fiddle link with the html and css.Please Ignore the images or proper alignment.Changes in the "lock and unlock" section of the code works perfect.

Link :https://jsfiddle.net/dkjz1z4k/

Its quite tricky for me.Kindly help,if anyone can.Thanks a lot.God bless.

Answer

Almost there, just a little tweak at the conditional if (count > 0) & .has-badge

$.each($('.Portfolio-box'), function() {
  var count = $(this).children('.has-badge').attr('data-count');
  if (count > 0) {
    $(this).children('ul.locked').hide();
    $(this).children('ul.unlocked').show();
  } else {
    $(this).children('ul.locked').show();
    $(this).children('ul.unlocked').hide();
  }
});

Working Fiddle

Comments