web-dev-qa-db-ja.com

JQueryのhide（）とshow（）が機能しないのはなぜですか？

単純なDIVがあり、hide（）とshow（）を取得できません。

私はそれを正しくやっていると思いますが、何が悪いのかわかりません。

<div id="thediv" >hola</div>
<input type="button" value="click to show">This is the div content</input>

$(document).ready(function() {
    $("div#thediv").hide();
    alert($("div#thediv").hide().attr("id"));
});

$("button").click( function() {
    $("div#thediv").show();
    alert('click');
});

また、 link " http://jsfiddle.net/rt9Fc/ "でフィドルを作成しました。

何か案は？

jqueryhtmlhideshow
5
Luciano

クリックハンドラーをdocument.ready内に配置し、セレクターを$("input:button")に変更します-

$(document).ready(function () {
    $("div#thediv").hide();
    alert($("div#thediv").hide().attr("id"));
    $("input:button").click(function () {
        $("div#thediv").show();
        alert('click');
    });
});

デモ --->JsFiddle

9
Mohammad Adil

コードにはもっと適切なバージョンがあります： JsFiddle

HTML：

_<div id="thediv">hola</div>
<input type="button" value="click to show"/>
_

JavaScript：

_$(function() {
    var $myDiv = $("#thediv");
    $myDiv.hide();
    alert($myDiv.attr("id"));

   $("input[type=button]").on('click', function() {
      $myDiv.show();
      alert('click');
    });
});
_

いくつかの役立つメモ：

  • dOM要素を見つけるのに費用がかかるため、キャッシュ検索DOM要素
  • クリックの代わりにオンを使用すると、動作が速くなります
  • $function()はdocument.readyのエイリアスであり、書き込みが速く、ネットワーク経由で送信するバイト数が少なくなります:)
  • div＃idセレクターを使用する必要はありません。＃idはページ内で一意である必要があるため十分です。さらに、jqueryがfindElementById javascript関数を使用した後、divの追加チェックを実行する必要はありません。
  • jQueryのパフォーマンスに関する素晴らしい記事があります： artzstudio
  • 入力を開始タグと終了タグに分割しないでください。

おそらくあなたはこれが欲しかったでしょう：

HTML：

_<div id="thediv">
    hola
    <input type="button" value="click to show"/>
</div>
_

このようにして、JavaScriptを最適化できます。

_$(function() {
    var $myDiv = $("#thediv");
    $myDiv.hide();
    alert($myDiv.attr("id"));

   $myDiv.find("input[type=button]").on('click', function() {
      $myDiv.show();
      alert('click');
    });
});
_
3
0lukasz0

変更ボタンselector：単純な_<input type='button'/>_を使用していたので、$('button')を使用する場合は、マークアップを_<button></button>_に変更します。

_$("#thediv").hide();
alert($("div#thediv").hide().attr("id"));


$("input[type='button']").click( function() {
    $("#thediv").show();

});
_

[〜＃〜]デモ[〜＃〜]_-->_ JsFiddle

1
Dhaval Marthak

ボタンセレクターを:buttonに変更するか、入力を使用します。 buttonセレクターは<button>Somebutton</button>に使用されます

$(document).ready(function() {

   var $thediv = $('#thediv').hide(); //Cache the object here. Also you can shain it through

    $(":button").click( function() {
    $thediv.show();
    alert('click');
});
});

フィドル

Idをお持ちの場合は、接頭辞としてtagnameを付けないでください。セレクターが遅くなります。したがって、#thedivの代わりにdiv#thedivを使用してください。また、jqueryオブジェクトを複数の場所で使用している場合は、変数にキャッシュしてみてください。これにより、jqueryオブジェクトの作成を毎回呼び出す必要がなくなります。

1
PSL

ボタンにIDを与える

<div id="thediv">hola</div>
<input type="button" id="btn" value="click to show"/>

このコードを使用する

$(document).ready(function() {
$("div#thediv").hide();
alert($("div#thediv").attr("id"));
});

$("input#btn").click( function() {
$("div#thediv").show();
alert('click');
});
0
Athul Nalupurakkal