Javascript/jquery布尔帮助：隐藏/显示Div

有人可以向我解释我在这段代码中做错了什么？Javascript/jquery布尔帮助：隐藏/显示Div

var isLoggedIn = function(state){ 
     if(state == true) { 
      $("#content-container").show(); 
      $("#account2").show(); 
      $("#account").hide(); 
     } 
     else(state == false){ 
      $("#content-container").hide(); 
      $("#account2").hide(); 
      $("#account").show(); 
     } 
    } 

onload=function() { 
      isLoggedIn(false); 
    }

在负载我想的div隐藏但后来当我点击我要的div显示按钮？

是否以正确的方式设置了布尔函数？

来源

2014-10-09 LearnerBeware

*“布尔函数的设置是否正确？”否：未捕获的SyntaxError：意外的标记{'。了解有关'if ... else'语句的更多信息：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else – 2014-10-09 00:07:44

'else if'，not only' else'或者只是删除else部分的条件部分，但是你的小提琴也是错误的，因为你的js代码已经在onload事件中加载了 – 2014-10-09 00:07:52

@Patrick Evans'说了什么，你会把所有的JavaScript放在你的'onload = function（）{/ *在这里* /}'。 jQuery'onload'等价物看起来像'$（function（）{/ * in here * /}）'，它是最简单的形式。 – PHPglue 2014-10-09 00:37:52

下面的片段试图重新安排在OP部分。 onload没有明确定义，没有解决，但可以附加到event，即，例如，window.onload = onload。 jquery中的包裹块.ready()event。删除jsonclick标记从html，包括在script元素，或从jquery .on("click")事件加载文件。新增严格比较运算符===（增加了=）至if/else if声明。将inputtype更改为按钮。添加if至else组成部分（请参阅由Felix Kling发表的评论链接）。

尝试

$(function() { 
var isLoggedIn = function(state){ 
     if(state === true) { 
      $("#content-container").show(); 
      $("#account2").show(); 
      $("#account").hide(); 
     } 
     else if(state === false){ 
      $("#content-container").hide(); 
      $("#account2").hide(); 
      $("#account").show(); 
     } 
    }; 

    isLoggedIn(false); 

    $("input[type=button]").click(function() { 
     isLoggedIn(true) 
    }) 
});

的jsfiddle http://jsfiddle.net/guest271314/14njfqef/3/

来源

2014-10-09 00:15:05 guest271314

当然，应该在AJAX响应后执行'isLoggedIn'。 – PHPglue 2014-10-09 00:23:15

为什么OP应该这样做？他们的代码有什么问题？你的解决方案如何解决它？ – 2014-10-09 00:28:25

工程，但然后没有其他的JavaScript功能工作 – LearnerBeware 2014-10-09 00:57:57

我假设你拥有jQuery库加载。尝试

if (state) { 
     $("#content-container").show(); 
     $("#account2").show(); 
     $("#account").hide(); 

} 
else{ 

    $("#content-container").hide(); 
     $("#account2").hide(); 
     $("#account").show(); 
}

解决您的问题。

来源

2014-10-09 00:17:03 rjae

为什么OP应该这样做？ – 2014-10-09 00:29:32

改变了你的HTML

<input type="submit" value="Boolean" id="toggle"/>

改写了你的JS作为

// JQuery run at start effectivly 
$(document).ready(function() { 

    function isLoggedIn(state) { 
     if(state == true) { 

      $("#content-container").show(); 
      $("#account2").show(); 
      $("#account").hide(); 
     } 
     else { 

      $("#content-container").hide(); 
      $("#account2").hide(); 
      $("#account").show(); 
     } 
    } 

    // JQuery attaching a click event using an anonymous function 
    // and hard coding your isLoggedIn to true, passing variables is a bit more complicated. 
    $('#toggle').click(function() {isLoggedIn(true)}); 

    isLoggedIn(false); 
})

来源

2014-10-09 00:23:49 Blue

在提交表单之前不应执行'isLoggedIn'。你如何检查这样的数据库？使用AJAX。在你的点击事件处理函数中，如果你在AJAX中使用'submit'按钮，'return false;'。就个人而言，除非我要使用'formElement.serialize（）'或'formElement.serializeArray（）'，否则我甚至不会使用表单。 – PHPglue 2014-10-09 00:26:31

为什么要更改HTML和JS？有什么问题？ – 2014-10-09 00:29:02

这只是代码的一小部分，它已被简化以便于回答。一旦表单被提交并且验证返回正确，就会调用这个函数 – LearnerBeware 2014-10-09 01:03:39

那么有几件事情我不知道，如果你是知道的，所以我觉得有我的结束部分责任确保他们被提及。它们是你的文章中的一些语法错误，它们阻止了它的工作，所以我不觉得有必要更新你对你正在使用的JQuery的看法以及你的选择器选择。

首先，我会为所有div的类结构添加一个全部目标，这样可以节省一些代码行。在制作过程中，下载所有访问者的代码越少越好，因为在网页上点击足够多的代码后，即使一小段代码也会失控。不得不提供服务速度，所以必须处理三个独立的jquery选择，而不是一个。

我会改变的HTML ...

<body> 
    <div id='content-container' class='boxes'> 
     Content Container 
    </div> 
    <div id='account' class='boxes'> 
     account 
    </div> 
    <div id='account2' class='boxes'> 
     account2 
    </div> 
    <input id="validateButton" type="submit" value="Boolean"> 
</body>

这种方式可以简单地与目标$(".boxes");所有div ......我不会推荐进入使用$("div");

接下来的习惯中我会将JQuery更改为更多JQuery友好代码。使用纯Javascript中的onload事件在正确的时间处理DOM对象的加载时处理JQuery驱动的函数并不总是有用。因此，您应该使用$(document).ready(handler)正确处理此负载事件，以防万一它会导致您遇到问题。这个准备好的事件的更常见的简写是一个简单的$(function() { });包装。

的代码的其余部分可以被重新安排到这个....

var isLoggedIn = false; //<--Instantiate to false, make global to window level scope 

//Load event Corrected For JQuery 
$(function() { 
    $(".boxes").hide(); //<--Hide on load 

    //Add A Proper Updated Click Event To Button 
    $("#validateButton").click(function() { 
     isLoggedIn = true; //<--Should include real functionality not hand coded to true 
     checkLoginAndRespond(); //<--Validate Login Status 
    }); 
}); 

function checkLoginAndRespond() { 
    //If Logged, Show 
    if(isLoggedIn) { 
     $(".boxes").show(); 

    //Else Don't 
    } else { $(".boxes").hide(); } 

} //end function

最后的版本。新版本的JQuery已经有一段时间没有发布，似乎也没有出现，所以使用最新版本是一个安全的选择，因为它的语法有数千页的帮助，而且非常稳定。我会推荐2.0或更高版本的JQuery中的任何东西。

来源

2014-10-09 00:45:03 GoreDefex

如果我将html更改为类，那么单个CSS样式将适用于我不想要的所有div。有没有办法解决？有 – LearnerBeware 2014-10-09 01:07:17

。在你的CSS中什么也没有强迫你根据任何你想要的东西来选择样式。所以如果我选择了一个你现在使用的测试类，比如'.boxes'，那么就使用你自己的类。如果您想单独选择每个div，请使用留在div上的ID。这就是我离开他们的原因。 Theres太多原因通常想单独选择一个像div一样的包装类。 – GoreDefex 2014-10-09 01:24:56

Javascript/jquery布尔帮助：隐藏/显示Div

回答

相关问题