7

私は最近jqueryに飛び込み、イベントがトリガーされたときに要素を表示/非表示にする方法が大好きでした。テストWebサイトに、ログインボタンをクリックするとログインフォームを表示し、ボタンをもう一度クリックするとフォームを非表示にする簡単な機能を追加してみました。私が使用しているjquery関数は1回だけ機能します（ボタンをクリックしてフォームを表示した場合）が、フォームが表示された後、ボタンをもう一度クリックしようとしても何も起こりません。

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()ボタンのクラスを切り替えるために使用できます

FIDDLEを確認してください

于 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

およびセレクターはフィルターで: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)または、ブール（true / false）値を返すメソッドを使用します。

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

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

コードを合理化する方法はたくさんありますが、これが実際の問題に対する答えです。

于 2012-10-30T18:54:21.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

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

また、インラインjavascriptを使用しないでください。これが動作しているjsfiddleですhttp://jsfiddle.net/MrsW8/

于 2012-10-30T19:00:27.570 に答える
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');
        };
    });
});

IDのない単一のdivと単一のボタンを使用しています。それがあなたの大義に役立つことを願っています。

于 2014-11-24T06:31:32.453 に答える
0

私はVueJsを使用していますが、1つのボタンで非表示/表示が機能しています。ボタンをクリックすると切り替わります。
例：
-showがfalseの場合、trueが割り当てられます。
showがtrueの場合、falseが割り当てられます。

<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 に答える