MaterializeCSS：如何在按下一個按鈕（打開和關閉）時切換兩個通知

Question

我將我的個人網站放在此Link StyleSource-Library BETA中

在某些內容下工作。 我創建了一個容器啟用器/禁用器按鈕。
在頂部位置右側導航欄中，該按鈕可以完美地將容器類添加到div標簽。 我還做了一些使用戶知道容器類是否已激活的事情。 但是問題在於它無法正常工作，或者當它們Container is ON按下兩次時它們會顯示相同的通知，例如Container is ON處於Container is ON狀態（應該是Container is ON處於Container is ON且Container is OFF處於Container is OFF ），或者最終在控制台中產生錯誤，例如Uncaught SyntaxError: Unexpected token ILLEGAL和Uncaught SyntaxError: Unexpected token )但首先，這里是激活容器的代碼。

的HTML

<li>
    <a href="#" id="ToggleContainer-NoficationStatus" class="tooltipped toggle-container waves-effect waves-red" data-position="bottom" data-delay="100" data-tooltip="Iam a Container Adder-Disabler :)">
        <i class="material-icons">web</i>
    </a>
</li>

jQuery的

<script type="text/javascript">
    $('.toggle-container').click(function(){
        $('#adder').toggleClass('container');
    });
</script>

為了激活通知，但實際上沒有顯示或顯示錯誤，這是在div標簽中檢測到或未檢測到容器類時切換通知的代碼

<script type="text/javascript">
    $(document).ready(function(){
        $("#ToggleContainer-NoficationStatus").click(function() {
            $(#adder).hasClass("container");
            setTimeout(function() {
                Materialize.toast('Container Layout is On.', 2000);
            }, 500);
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#ToggleContainer-NoficationStatus").click(function() {
            (!$(#adder).hasClass("container"));
            setTimeout(function() {
                Materialize.toast('Container Layout is Off.', 3000);
            }, 1000);
        });
    });
</script>
<div id="adder" class=""> //This is where the Container Class Goes on

3個小時前，我一直在使用此功能，但仍然無法繼續使用，也無法在Internet上找到任何解決方案。 即使有，但它不起作用。 我的母親為在個人項目中的計算機上呆了12個小時而感到生氣。 我需要一些幫助:)我的意思是如何解決此錯誤？ 任何幫助表示贊賞。 :)

INFO查找錯誤實際上在哪里發生。 請轉到我的網站StyleSource-Library BETA，該錯誤位於右上角的按鈕中。 該圖標就像Web布局圖標。

Answer 1

考慮您的評論后，發布答案。 根據需要更新腳本，以使腳本更簡單，更有效 。

 $('.toggle-container').click(function(){ // Step 1: It would toggle class at begin $('#adder').toggleClass('container'); // Step 2: Would check if '#adder' has class=conatiner and displays toast, if not goes to Step 3 if($("#adder").hasClass("container")) { alert("Container Layout is ON"); // Write your setTimeout function here. } //Step 3: Would check if '#adder' does not has class=conatiner and displays toast. if(!$("#adder").hasClass("container")) { alert("Container Layout is OFF"); // Write your setTimeout function here. } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <li><a href="#" id="ToggleContainer-NoficationStatus" class="tooltipped toggle-container waves-effect waves-red" data-position="bottom" data-delay="100" data-tooltip="Iam a Container Adder-Disabler :)"> <i class="material-icons">web</i></a></li> <div id="adder" class=""> //This is where the Container Class Goes on</div> 

要嘗試修改以下演示鏈接：

JSFiddle：演示 。

小提琴：更新