onclick 'help window'を閉じる関数が機能しない

私はヘルプウィンドウを表示するフォームでdivを設定しました。そして、onclick関数を使ってトップの右隅に 'X'を設定したいと思います窓を閉めて。このdivはHTMLの一番下にあり、最後のbodyタグの直前に正しい位置がありますか？私はディスプレイでこれをやりたいと思っています、注意してください：、なしのタグを（示していない）または非表示（） HTMLonclick 'help window'を閉じる関数が機能しない

<div id="personalhelp"><p class="x"><a href="" onclick="close()">x</a></p> 
<p class="help">Your personal information is needed to ensure we provide the most 
relevant information and options for you. We will never sell your personal 
information to third parties for any reason.</p> 
<p class="help">Please fill in all required fields, 
these are identified with an asterisk (*)</p> 
</div>

機能（jQueryの）

function close() { 
    var getid = $(this).parent.attr('id'); 
    console.log(getid); 
    $(getid).css("display", "none"); 
}

CSS

#personalhelp { 
    position: fixed; 
    right: 10%; 
    top: 10%; 
    max-width: 60%; 
    display: block; 
    background-color: #D3D3D3; 
    color: #000; 
    margin: 5px auto; 
    border: 2px solid #000; 
    display: block; 
} 

.x { 
    position: absolute; 
    right: 1%; 
    top:1%; 
    padding: 1px; 
    margin: 0 auto; 
} 
.help { 
    padding: 10px; 
}

出典

2017-10-05 Sarah

私は以下の私の答えで述べたように、変更のコールバック名close' 'から –

close()メソッドでは、何かがわからないthisです。 jQueryはそれ自身のclick()機能を持っていますので、それを使用して、あなたのHTMLにonclick="..."を避けてください。ただ、この操作を行います。

$(".x").click(function() { 
    $(this).parent().hide(); 
});

もちろん

代わりのhide()あなたには、いくつかの他の方法で「閉じる」を扱うことができます。これはclick()コールです。ここで

が実行されている例です。

$(".x").click(function() { 
 
    $(this).parent().hide(); 
 
});

#personalhelp { 
 
    position: fixed; 
 
    right: 10%; 
 
    top: 10%; 
 
    max-width: 60%; 
 
    display: block; 
 
    background-color: #D3D3D3; 
 
    color: #000; 
 
    margin: 5px auto; 
 
    border: 2px solid #000; 
 
    display: block; 
 
} 
 

 
.x { 
 
    position: absolute; 
 
    right: 1%; 
 
    top: 1%; 
 
    padding: 1px; 
 
    margin: 0 auto; 
 
} 
 

 
.help { 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="personalhelp"> 
 
    <p class="x"><a href="" onclick="close()">x</a></p> 
 
    <p class="help">Your personal information is needed to ensure we provide the most relevant information and options for you. We will never sell your personal information to third parties for any reason.</p> 
 
    <p class="help">Please fill in all required fields, these are identified with an asterisk (*)</p> 
 
</div>

出典

2017-10-05 10:40:13 mumpitz

close'ブラウザのネイティブ関数は'があるので、他のSTHするにはhide（）とcss（ "display"、 "none"）の両方で、それを0.5秒間隠すと、再び表示されます。何がそこに間違っている可能性がありますか？ – Sarah

両方を使用しないでください。 'hide（）'はあなたのためにCSSを設定します。それはそうです:) 'close（）'メソッドを完全に削除してください。 – mumpitz

ああ、私は両方を使用していません。私は違いがあるかどうかを見てみました。私はあなたが持っているものをコピーして貼り付けましたが、xをクリックすると隠されていません – Sarah

分割タグは常に<body>... </body>セクションを設置する必要があります。あなたはちょうどこのdocument.getElementById(mydiv).style.display="none"; または基本的に

$('#mydiv').hide();

のようなあなたのスクリプトコードを変更する必要が

これはnoneに設定CSSのdisplayプロパティを意味します。そしてスクリプト関数でonclickイベントを書き込もうとしているかもしれません...

出典

2017-10-05 10:44:44

問題はあなたの関数closeにあります。代わりに呼び出されるその名前を持つブラウザネイティブ関数があります。他の名前に変更すると動作します。また、var getid = $(this).parent().attr('id');である必要があります。

function closePersonalHelp() { 
 
    var getid = $(this).parent().attr('id'); 
 
    console.log(getid); 
 
    // line below is roughly equivalent to $(getid).hide(); 
 
    $(getid).css("display", "none"); 
 
}

#personalhelp { 
 
    position: fixed; 
 
    right: 10%; 
 
    top: 10%; 
 
    max-width: 60%; 
 
    display: block; 
 
    background-color: #D3D3D3; 
 
    color: #000; 
 
    margin: 5px auto; 
 
    border: 2px solid #000; 
 
    display: block; 
 
} 
 

 
.x { 
 
    position: absolute; 
 
    right: 1%; 
 
    top:1%; 
 
    padding: 1px; 
 
    margin: 0 auto; 
 
} 
 
.help { 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="personalhelp"><p class="x"><a href="" onclick="closePersonalHelp()">x</a></p> 
 
<p class="help">Your personal information is needed to ensure we provide the most 
 
relevant information and options for you. We will never sell your personal 
 
information to third parties for any reason.</p> 
 
<p class="help">Please fill in all required fields, 
 
these are identified with an asterisk (*)</p> 
 
</div>

出典

2017-10-05 10:45:21

実行例を投稿していただき、ありがとうございます。しかし、私は彼女がjQueryを使用する場合、彼女は 'onclick =" ... "によってクリックを処理すべきではないと考えています。 – mumpitz

$(document).ready(function(){ 
 
$("#personalhelp").click(function(){ 
 
$(".help,div").css("display","none"); 
 
}) 
 
});

#personalhelp { 
 
    position: fixed; 
 
    right: 10%; 
 
    top: 10%; 
 
    max-width: 60%; 
 
    display: block; 
 
    background-color: #D3D3D3; 
 
    color: #000; 
 
    margin: 5px auto; 
 
    border: 2px solid #000; 
 
    display: block; 
 
} 
 

 
.x { 
 
    position: absolute; 
 
    right: 1%; 
 
    top:1%; 
 
    padding: 1px; 
 
    margin: 0 auto; 
 
} 
 
.help { 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="personalhelp"><p class="x"><a href="">x</a></p> 
 
<p class="help">Your personal information is needed to ensure we provide the most 
 
relevant information and options for you. We will never sell your personal 
 
information to third parties for any reason.</p> 
 
<p class="help">Please fill in all required fields, 
 
these are identified with an asterisk (*)</p> 
 
</div>

出典

2017-10-05 11:29:35

onclick 'help window'を閉じる関数が機能しない

答えて

関連する問題