7

我最近一直在研究 jquery，并且喜欢在触发事件时如何显示/隐藏元素。我尝试向我的测试网站添加一个简单的功能，当单击登录按钮时将显示登录表单，然后如果再次单击该按钮则隐藏表单；我正在使用的 jquery 函数只工作一次（当我单击按钮并显示表单时）但在显示表单后，如果我再次尝试单击按钮，则没有任何反应。

jQuery代码：

function displayLoginBox(){


if ($("#login_Box_Div:hidden")){

        $("#login_Box_Div").show();
        $("#buttonLogin").css('color', '#FF0');

}
else if($("#login_Box_Div:visible")){

        $("#login_Box_Div").hide(); 
        $("#buttonLogin").css('color','white');
}
}

HTML按钮代码：

<h3> <a href= "#">Pictio  </a> <button id = "buttonLogin" onclick = "displayLoginBox()">LogIn</button></h3>

HTML div 代码：

<div id = "login_Box_Div"> 
        <form name = "myform" > 
            <input type = "text" name = "username" placeholder = "Username"  />
            <input type = "password" name = "password" placeholder= "Password" />
            <input type = "submit" id = "submitLogin" />
        </form>

</div>

我有一种感觉 jquery 脚本只运行一次然后就完成了，但我可能是错的。

4

10 回答 10

12

尝试使用.toggle()

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    $(this).toggleClass('class1')
});​

.class1
{
     color: orange;
}​

您可以使用toggleClass()来切换按钮的类

检查小提琴

于 2012-10-30T18:46:40.380 回答
5

无需使用内联 javascript。

LIVE DEMO

$('#buttonLogin').click(function(){
   $('#login_Box_Div').toggle();
});
于 2012-10-30T18:47:33.310 回答
2

你可以试试这个

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    var color=$("#login_Box_Div").is(':hidden') ? '#FF0' : 'white';
    $("#buttonLogin").css('color', color);
});

例子。

更新：

或者使用togglrClass你可以试试这个

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    $("#buttonLogin").toggleClass('whiteColor yelolowCollor');
});

例子。

于 2012-10-30T18:56:05.253 回答
0

如果您愿意，可以使用此代码，它帮助我实现了同样的目标。

$("button").click(function(){
$("div").toggle(function(e) {
        if ($(this).is(":visible")) {
            $("div").show();
            $("button").css('color', 'red');
        }
        else {
            $("div").hide(); 
            $("button").css('color','white');
        };
    });
});

我只使用一个 div 和一个没有 id 的按钮。希望它对您的事业有所帮助。

于 2014-11-24T06:31:32.453 回答
0

使用$('login_Box_Div').is(':hidden')和$('login_Box_Div').is(':visible')

您也不应该使用内联 javascript。这是它的一个 jsfiddle http://jsfiddle.net/MrsW8/

于 2012-10-30T19:00:27.570 回答
0

试试 jQuery 的切换功能来完成这个

于 2012-10-30T18:46:30.973 回答
0

JS

function displayLoginBox(elem){

 $("#login_Box_Div").toggle();
 $(elem).toggleClass('login_clicked');

}

CSS

#buttonLogin{color: #fff;}
.login_clicked{color: #FF0 !important;}

HTML

<h3> <a href= "#">Pictio  </a> <button id = "buttonLogin" onclick = "displayLoginBox(this)">LogIn</button></h3>

这种方法也改变了登录按钮的颜色。

于 2012-10-30T18:50:28.670 回答
0

尝试这个：

function displayLoginBox(){
    $("#login_Box_Div").toggle(function(e) {
        if ($(this).is(":visible")) {
            $("#login_Box_Div").show();
            $("#buttonLogin").css('color', '#FF0');
        }
        else {
            $("#login_Box_Div").hide(); 
            $("#buttonLogin").css('color','white');
        };
    });
}
于 2012-10-30T18:52:43.513 回答
0

:hidden和选择器是过滤器，而:visible不是布尔方法。

这意味着：当你在测试时

if ($("#login_Box_Div:hidden")){

...你得到的$("#login_Box_Div:hidden")是一个 jQuery 对象——它总是存在，并且总是返回 true，即使里面什么都没有。

你需要做的是测试.length那个 jQuery 对象。如果为零，则 jQuery 对象为空：

if ($("#login_Box_Div:hidden").length){ // zero is false, greater than zero is true

http://jsfiddle.net/mblase75/ThwFs/

或者，使用该.is(selector)方法，它确实返回一个布尔（真/假）值：

if ($("#login_Box_Div").is(":hidden")){

http://jsfiddle.net/mblase75/ThwFs/2/

虽然有很多方法可以简化您的代码，但这是您遇到的实际问题的答案。

于 2012-10-30T18:54:21.570 回答
0

我正在使用 VueJs，它可以在一个按钮中隐藏/显示。当我点击按钮时，它会切换。
例如：-
如果显示为假，那么它将分配为真。
如果显示为真，那么它将分配为假。

<template>
    <div>
        <h1 v-if="show">Show</h1>
        <h1 v-else>Hide</h1>
        <button @click="show =! show">Toggle Heading</button>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            show: true 
        }
    }
}
</script>
于 2022-01-12T12:00:24.550 回答