0

画像をクリックしたときに div を表示/非表示にしようとしています。画像をクリックしても何も起こりません。私のコードの何が問題なのですか

<script type="text/javascript">
$('#close').click(function(){
    $('#main').show();
    $('#login').hide();
    });
</script>

<div style="float:right;"><a href="#">Close <img id="close" src="assets/close.png"></a></div>
4

5 に答える 5

2

おそらく、スクリプトが実行されたときに、closeイメージがまだ存在していないことが原因です。セットアップを$(document).readyブロックにラップする

ちょっとした更新: 自分のマシンでの簡単なテストでは.click(..)、イメージ タグを呼び出しても何も起こりませんでした。私はそれを変更したので、close要素は実際には<a>であり、うまくいきました。

関連する HTML:

 <a id="close" href="#">Close (image goes here)</a>
于 2012-07-23T21:58:31.637 に答える
1 
<script type="text/javascript">
    $(function(){
        $('#close').live('click',function(){
            $('#main').show();
            $('#login').hide();
        });
    });
</script>

<div style="float:right;"><a id="close">Close <img src="assets/close.png" /></a></div>

ライブ機能をご利用ください。また、テキストでもトリガーされるように、 a タグをターゲットにします。

于 2012-07-23T22:18:35.553 に答える
0

まず、同じ ID を複数回使用しないでください。

それで：

 <script type="text/javascript">
    $('#image').click(function(){
        $('#close').toggle();
        });
    </script>

    <div id="close" style="float:right;"><a href="#">Close <img id="image" src="assets/close.png"></a></div>

もちろん、これにより画像も非表示になるため、クリックするものは何もありません..しかし、それは始まりです.

于 2012-07-23T21:57:33.710 に答える
0

jQuery ライブは非推奨です。jQuery のドキュメントでは、.on("click", function(){

});

jQuery.live()

jQuery.on()

于 2014-04-28T14:56:45.977 に答える
0

ID とクラス名の使用に関しては、かなり良い経験則があります。テンプレートで複数回使用する場合は、クラスにします。メイン、ログイン、ヘッダー、またはフッターの場合、ID は正常に機能しますが、ここではクラスを使用します。

それがあなたの問題の原因ではありませんが、私はそれを指摘したいと思いました。あなたの問題はおそらく、セレクターがまだ存在しないものを見つけようとしているためです。2つの選択肢があります

1.) スクリプトをページの一番下に移動します
。

ここに私の提案を含む更新されたコード例があります

<!DOCTYPE HTML>
<html>
<head>
    <title>Click Handler</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">

        $(function(){
            $('.close').click(function(){
                $('#main').show();
                $('#login').hide();
            });
        })

    </script>

</head>
<body>

<div style="float:right;"><a href="#" class="close">Close <img src="assets/close.png" class="close"></a></div>


<div id="main" style="display:none;">Main</div>
<div id="login">Login</div>

</body>
</html>
于 2012-07-23T22:05:33.777 に答える