javascript - 如果 .parent().hasClass 那么 .parent().toggleClass

Question

你能帮我解决这个问题吗？

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>

仅当父级已经拥有该类时，我才需要切换该类，否则什么都不做。

Answer 1

你需要以某种方式存储旧类，否则它会丢失。

这会将旧类存储在“data-old-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