MaterializeCSS：如何在按下一个按钮时切换 2 个通知（打开和关闭）

Question

我把我的个人网站放在这里Link StyleSource-Library BETA

在处理某些内容时。我创建了一个容器 Enabler/Disabler 按钮。
在顶部位置右侧的导航栏中该按钮非常适合将容器 class 添加到 div 标签。我还做了一些让用户知道容器 class 是否被激活的东西。但问题是它不起作用，或者它们在按下两次时显示 Container is ON 等相同的通知（它应该是 Container is ON 和 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>

And For activating the Notification but it actually not showing or showing an error Here's the code for Toggling The Notification when the Container Class Is detected or not in div tag

<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 个小时而生气。我需要一些帮助 :) 我的意思是如何解决这个错误？任何帮助表示赞赏。 :)

信息找出错误实际发生的位置。请转到我的网站 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>

尝试修改下面的演示 Link：

JSFiddle : DEMO.

Fiddle : Updated

MaterializeCSS：如何在按下一个按钮时切换 2 个通知（打开和关闭）

MaterializeCSS : How to Toggle 2 Notifications When Pressing One button (On and Off)

html

javascript

css

jquery

materialize