Question

我把我的个人网站放在这个链接上 StyleSource-Library BETA

在处理某些内容时。我创建了一个Container Enabler / Disabler按钮。
在顶部位置右侧的导航栏中 Button完美地用于将容器类添加到div标记。我还做了一些让用户知道容器类是否被激活的东西。但问题是它没有效果，或者当按下两次时它们显示相同的通知，例如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>

并且用于激活通知但实际上没有显示或显示错误以下是切换通知时的代码在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小时前我一直在研究这个功能，但仍无法继续前进，无法在互联网上找到任何解决方案。即使有，但它不起作用。我的母亲因为在我的个人项目上工作了12个小时而生气。我需要一些帮助:)我的意思是如何解决这个错误？任何帮助表示赞赏。：）

INFO 要找出实际发生的错误。请转到我的网络StyleSource-Library BETA，错误位于右上角的按钮中。图标就像网页布局图标。

Answer 1

考虑您的意见，发布答案。根据需要更新了脚本使脚本更简单有效。

＆＃13;

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

＆＃13;

<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>

＆＃13;

尝试修改下面的演示链接：

JSFiddle : DEMO

Fiddle : Updated

MaterialiseCSS：按下一个按钮时如何切换2个通知（开和关）

1 个答案: