Tag dependence approach

Question

I need to add class is_active to all div's when I click on <div id="all-tags"> and remove class if I click again. Only every div have class is_active then main div (<div id="all-tags">) have class is_active.

Please tell me if this is ok or not. I need as fast of a solution as possible. I'm also not sure using .each() is a very good idea.

I need as fast of a solution as possible. I'm not sure using if .each() is a very good idea.

$("#all-tags").click(function() {
    if ($(this).hasClass("is_active")) {
        $(".tags_cloud div").each(function() {
            $(this).removeClass("is_active");
        });
    } else {
        $(this).addClass("is_active");
        $(".tags_cloud div").each(function() {
            $(this).addClass("is_active");
        });
    }
});

$(".tags_cloud div").click(function() {
    !$(this).is("#all-tags") ? $(this).toggleClass("is_active") : true;
    var c = 0;
    $(".tags_cloud div").each(function() {
        if ($(this).hasClass("is_active") && !$(this).is("#all-tags")) {
            // some my code
        } else if (!$(this).is("#all-tags")) {
            $("#all-tags").removeClass("is_active");
            c = 1;
        }
        c == 0 ? $("#all-tags").addClass("is_active") : true;
    })
});

What you should consider is to store the result of repeating code into some variable, you are calling ''$("#all-tags")'' too many times. — xxxmatko
– xxxmatko, Commented May 4, 2016 at 12:46
@user6290619 yeah... It could be improved upon, depending on how many items you are going to be targeting in the final version, but for a small group as shown in the example, for a regular (average) website on an average, low-budget server, it serves the purpose magnificently — porjolovsky
– porjolovsky, Commented May 4, 2016 at 12:47
@porjolovsky I have a lot of items (tags) something about 25 so far — SimBioT
– SimBioT, Commented May 4, 2016 at 12:52

empiric · Accepted Answer · 2016-05-04 13:26:10Z

I updated your code to remove the first click-handler and the each-loops. However I'm not quite sure if this is necessarily faster then your solution.

My suggestion relies on callbacks, css-selectors and conditions:

$(".tags_cloud div").click(function() {

  var $this = $(this),
    $tags = $(".tags_cloud div:not(#all-tags)"),
    $all = $(".tags_cloud div#all-tags");

  var all = $(this).is('#all-tags') ? true : false;
  if (all) {
    $this.toggleClass(function() {
      if (!$(this).hasClass('is_active')) {
        $tags.addClass('is_active');
      } else {
        $tags.removeClass('is_active');
      }
      return "is_active";
    });
  } else {
    $this.toggleClass('is_active');
    ($tags.not('.is_active').length === 0) ? $all.addClass('is_active') : $all.removeClass('is_active');
  }
});

Demo

Foaster · Accepted Answer · 2016-05-04 12:45:43Z

0

I guess I would reduce it to this:

$(".tags_cloud div").click(function(){
  if ($(this).attr('id') == "all-tags" && !$(this).hasClass("is_active")) {
    $(".tags_cloud div").addClass("is_active");
  }
  else if ($(this).attr('id') == "all-tags" && $(this).hasClass("is_active")) {
    $(".tags_cloud div").removeClass("is_active");
  }
  else {
    $(this).toggleClass("is_active"); 
    $(".tags_cloud div#all-tags").removeClass("is_active");        
  }
});

It does exactly the same, as far as I can tell. But with half the code and without use of .each()...

answered May 4, 2016 at 12:45

Foaster

\$\begingroup\$ Sorry, but you are wrong. If only 3 div's are "active" and I'm click on fourth div, then <div id="all-tags"> would not get class "is_active" \$\endgroup\$

SimBioT
– SimBioT

2016-05-04 12:49:39 +00:00
Commented May 4, 2016 at 12:49

Add a comment |

Stack Exchange Network

Tag dependence approach

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Tag dependence approach

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions