2017-05-08 106 views
0

我有一個代碼,顯示和隱藏div,當div打開或關閉不透明度和顏色的變化。我不想使用JQuery .css()將CSS直接添加到元素,而是想使用addClass,但我無法弄清楚爲什麼下面的代碼不起作用。JQuery addClass不工作

我收到消息'ReferenceError:$ is not defined'當我運行構建。我不確定這是什麼意思。請幫助。

JQuery的

$(document).ready(function() { 
    $(".upload-panel-container").click(function(e) { 
     $(".upload-menu-container").toggleClass("open").slideToggle(100, "linear"); 
     if ($(".upload-menu-container").hasClass("open")) { 
      $(".upload-panel-container").addClass("setOpacityto1"); 
     } else { 
      $(".upload-panel-container").addClass("setOpacityto85"); 
     } 
    }); 

}); 

CSS

.setopacityto1 { 
    opacity: 1; 
    color: red; 
} 

.setopacityto85{ 
    opacity: .85; 
    color: blue; 
} 
+0

您是否包含jQuery? – j08691

+0

是的,我在html下面的html和js文件頭上添加了jQuery。 slideToggle正在工作,但不是addClass。 – Fortytwo

回答

2

「$沒有定義」 通常意味着jQuery的尚未加載到您的網頁正常。所以$(jQuery語法)不被識別

更新:我修正了它。你的類名是區分大小寫的,確保你在CSS和JS中使用相同的名字。您不僅需要添加您想要更改的類,還需要刪除它們;否則每次點擊時,該類將再次添加,並且最終會將這兩個類添加到元素中。 (檢查元素以瞭解我的意思。)

$(document).ready(function() { 
    $(".upload-panel-container").click(function() { 
     $(".upload-menu-container").toggleClass("open").slideToggle(100, "linear"); 
     if ($(".upload-menu-container").hasClass("open")) { 
      $(".upload-panel-container").addClass("setopacityto1"); 
      $(".upload-panel-container").removeClass("setopacityto85"); 
     } else { 
      $(".upload-panel-container").addClass("setopacityto85"); 
      $(".upload-panel-container").removeClass("setopacityto1"); 
     } 
    }); 

}); 
+0

嘿剛剛發現了一些東西,我想知道你需要什麼「e」,當你將「e」傳遞給你的函數? – KayeeJayee

+0

我刪除它。我有我的HTML,切換工程,但沒有addClass的jQuery。 – Fortytwo

+0

@Fortytwo我找到了一個解決方案。我編輯了我的答案,嘗試一下代碼,看看它是否也適用於你。 – KayeeJayee