如果.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

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

这将将旧类存储在“数据-旧类”中，并切换新类：

联署材料：

 $(".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");
     }
 });

小提琴

Answer 2

我想出了个办法，有几件事要解决。第一步是组织变量和方法调用，以提高效率和可读性，如下所示：

...
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";
...

这为我们节省了大量函数调用和大量DOM查找，这些都很昂贵。它还为我们节省了大量的重复，使我们更容易跟踪所选内容中的错误，并使我们能够更好地阅读代码。

它要起作用的第二件事是从.toggleClass()中删除一个参数，就像这样(如果字符串，请注意变量)。看起来很整洁，不是吗？)：

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

.toggleClass只使用一个类作为它的参数，根据我所读到的，在给定.col-md-6的示例中，不应该需要切换第一个类。如果有，我相信你会想出办法的。

通过这些更改，您的代码应该可以正常工作。

编辑:由于所有的情况(cl_4、cl_6、cl_8)似乎都要切换cl_12，所以可以使用OR:s将条件简化为单个if ()。

EDIT2:误解了OP，没有看到您想要按指示将原来的类交换为.col-md-12。但是，除非发生了一些奇怪的事情，否则不应该需要删除原始类(cl_4/6/8)，因为如果将cl_12放在原始类之后，则应该优先。

Answer 3

首先，您需要在删除旧类之前存储它，这样您就知道以后要更改回哪个类了。您还可以将$(this).parent().parent()保存在变量中，以增加可读性，并避免塞夫洛登指出的不必要的DOM查找。

你可以这样做：

$(".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");
});

小提琴