Javascript 如果.parent（）.hasClass，则.parent（）.toggleClass

你能帮我解决这个问题吗

Javascript: HTML:

---

只有当父类已经有类时，我才需要切换类，否则什么也不做。

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

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

JS:

---

解决了这个问题，有几件事需要解决才能让它正常工作。第一步是稍微组织变量和方法调用，以提高效率和可读性，如下所示：

...
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（）

中删除一个参数， 像这样（如果字符串看起来整洁，请注意变量，不是吗？）：

.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放在原始类之后，则应优先考虑

首先，您需要在删除旧类之前存储它，以便知道以后要更改回哪个类。您还可以将

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

---

如果可以，请向我们展示您的HTML代码。如果您可以发布一段HTML代码片段，这样我们就可以看到

的位置和所有类。您想用

col-md-12

做什么，您希望它什么时候出现，什么时候消失？我不认为你在寻找

切换

，尤其不是连续三次。每当单击

时，我想更改

col-md-12

的现有

.parent（）.parent（）

类，当再次单击时，我想将其更改为以前的类我要做的第一件事是缓存

$（this.parent（）.parent（））

。无需在DOM中执行如此多的查找，并且提高了可读性。类似于

var祖父母=$（this.parent（）.parent（）。就是这样！html中缺少
数据旧类=“
”，非常感谢！是的，您可以在html中使用data old class=“”，或者首先在JS中检查它是否为空。这几乎成功了！只需在添加
.col-md-12
时删除
.col-md-6
，然后将其还原，因为它不优先。重命名会更容易实现吗？为什么需要删除。col-md-6
class=“col-md-6 col-md-12”
无论出于何种目的，都应与
class=“col-md-12”
完全相同。右侧较远的样式覆盖左侧的样式：）不幸的是，这里没有发生这种情况：/The
class=“col-md-6”
将作为主样式返回，如果其他地方出现错误，则其他解决方案会起作用；将旧类存储在数据属性中并重新应用，但我建议研究一下为什么即使应用了col-md-12，col-md-6仍然优先。我猜你想让它改变宽度？如果是这样，当
col-md-6 col-md-12
时，-12的宽度（和边距）应覆盖-6的宽度（和边距）。
 $(".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");
     }
 });

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

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

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