Hide all different contents from the selected

Asked

Viewed 31 times

0

I created a javascript code that hides all different Ivs from the value that was selected in select.

$(".filter-target").change(function() {
  var target = $(this).val();
  if (target == 0) {
      $('[data-target]').removeClass('hidden');
      return;
  }
  var self = $('[data-target="'+target+'"]');
  $('[data-target]').not(self).toggleClass('hidden');

});

When I select the option that I have displayed the others hide normally, but if I test the others they start to get messy and do not obey the order to "hide all those that are not x", the ones that were to appear disappear and come back. what could be wrong?

javascript jquery
  • 1

    It would be interesting to have an example in Snippet.

  • "they begin to get messy and do not obey the order to "hide all who are not x", this is not very revealing.

  • @Wallacemaxters the content is dynamic in a plugin I’m using (fullcalendar), it is difficult to create a snippet.

  • 1

    @nicematt, when I say that gets messy means that those who were not to appear appear appear, those who were to appear disappear, I added more content to improve the question, obg.

1 answer

0

What I noticed was that:

  • you forgot to display the elements equal to self;
  • and that you are always alternating the class "hidden", which may end up making elements that were to be invisible as "visible". You could try adding instead.
var $self = $('[data-target="'+target+'"]');

/* torna os elementos iguais visíveis (caso invisíveis) */
$self.removeClass('hidden');

/* torna os elementos diferentes invisíveis (caso visíveis) */
$('[data-target]').not($self).addClass('hidden');

Note: I can’t say, because I don’t use jQuery, but I think the method addClass and removeClass already solve the problem of several classes of the same name in one element.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.