CODEWITHSUNDEEP
javascriptjqueryhtml
JPereira
JPereira

Reputation: 13

if .parent().hasClass then .parent().toggleClass

Could you help me out with this?

Javascript:

$(document).ready(function(){
    $(".tile a").click(function() {
        $(this).closest("div").toggleClass("selected_tile");
        if($(this).parent().parent().hasClass("col-md-4")){
            $(this).parent().parent().toggleClass("col-md-4 col-md-12");    
        }
        if($(this).parent().parent().hasClass("col-md-6")){
            $(this).parent().parent().toggleClass("col-md-6 col-md-12");    
        }
        if($(this).parent().parent().hasClass("col-md-8")){
            $(this).parent().parent().toggleClass("col-md-8 col-md-12");    
        }
    });         
});

HTML:

<div class="col-md-6">
    <div class="tile">
        <a href="#">web</a>
        <div class="project_info"></div>
    </div>
</div>

I need to toggle the classes only if the parent has the class already, otherwise do nothing.

Upvotes: 0

Views: 2312

Answers (3)

Ziv Weissman
Ziv Weissman

Reputation: 4526

You need somehow to store the old class, otherwise it will get lost.

This will store the old class in "data-old-class" and toggle your new class:

JS:

 $(".tile a").click(function () {
     $(this).closest("div").toggleClass("selected_tile");
     //use varible!! no need to see (this).parent.parent.parent so many times XD
     var grandParent = $(this).parent().parent();
     //Check if it already has an "old class"
     if ((grandParent.attr("data-old-class"))&&grandParent.attr("data-old-class") !== '') {
         grandParent.removeClass("col-md-12").addClass(grandParent.attr("data-old-class"));
         //remove the old class (its more generic than toggle)
         grandParent.attr("data-old-class","");
     } else {
         grandParent.attr("data-old-class", grandParent.attr("class"));
         grandParent.attr("class","");
         grandParent.addClass("col-md-12");
     }
 });

Fiddle

Upvotes: 1

xiix
xiix

Reputation: 162

Figured this one out, and there are a couple of things to address to get it working. The first step is to organize your variables and method calls a bit, for efficiency and readability, like so:

...
var $this = $(this),
            grandparent = $this.parent().parent(),
            cl_4 = "col-md-4", 
            cl_6 = "col-md-6", 
            cl_8 = "col-md-8",
            cl_12 = "col-md-12";
...

This saves us a lot of function calls and a lot of DOM lookups, which are expensive. It also saves us a lot of repetition, makes it easier to track down errors in the selection and allows us to read the code a bit better.

The second thing for it to work is to remove an argument from .toggleClass(), like so (notice the variables instead if strings. Looks neat, no?):

...
if(grandparent.hasClass(cl_4)){
    grandparent.toggleClass(cl_12);    
}
...

.toggleClass only takes one class as its argument, and from what I can read there shouldn't be a need to toggle the first class, in the example given .col-md-6. If there is, I'm sure you can figure out a way.

With these changes your code should work fine.

EDIT: Since all the cases (cl_4, cl_6, cl_8) seem to toggle cl_12, you could reduce the conditional to a single if () with OR:s.

EDIT2: Misinterpreted the OP, and didn't see that you wanted to exchange the original class for .col-md-12 as indicated. However, unless something odd is going on there shouldn't be any need to remove the original class (cl_4/6/8) as cl_12 should take precedence if placed after the original class.

Upvotes: 1

Johan Karlsson
Johan Karlsson

Reputation: 6476

First of all you need to store the old class before removing it so you know what class to change back to later. You can also save $(this).parent().parent() in a variable to increase readability and avoid unnecessary DOM lookups as pointed out by sxefloden.

You can do it like this:

$(".tile a").click(function () {
    $(this).closest("div").toggleClass("selected_tile");
    var mdClass, 
        grandParent = $(this).parent().parent();

    if (grandParent.hasClass("col-md-12")) {
        mdClass = grandParent.data("previous-class");
    } else {
        mdClass = grandParent[0].className.match(/\bcol-md-\d\b/);
        grandParent.data("previous-class", mdClass);
    }

    grandParent.toggleClass(mdClass + " col-md-12");
});

Fiddle

Upvotes: 0

Related Questions