0

私は実際には開発者ではありません。私は自分のウェブサイトをデザインすることを好みます... したがって、実際のプロジェクトでは、いくつかの「基本的な」スクリプトを開発する必要があります。

私はこれで問題に遭遇しました:

<script type="text/javascript">
$("button").click(function toggleDiv(divId) {
$("#"+divId).toggle();
});
;
</script>

頭の中-/頭

<a href="javascript:toggleDiv('myContent');">LINK</a> 
<div> id="myContent">Lorem Ipsum</div>

IE8で動作します。（奇跡）。しかし、他のブラウザではありません...「リンク」をクリックするとウィンドウが表示され、もう一度クリックするとウィンドウが閉じます。

何か案が ？

ありがとう！

4

2 に答える 2

2

問題の 1 つは、バインディング イベント ハンドラーの 2 つの異なるスタイルを混在させていることです。一方は適切 (jQuery メソッド) であり、もう一方は不適切 (属性​​のjavascript:プロトコルhref) であり、2 つがまったく連携しません。 . もう 1 つの問題は、指定した HTML (ボタンを作成しない) に対してセレクターが完全に正しくない (ボタンを探している) ことです。

HTML5data-*属性を使用して、要素の を指定することをidお勧めします。<div><a>

<a href="#" data-divid="mycontent">LINK</a>
<div id="mycontent">Lorem ipsum</div>

次に、次の jQuery コードを使用します。

$('a').click(function(e) {
    e.preventDefault(); // e refers to the event (the click),
    // calling preventDefault() will stop you following the link
    var divId = $(this).data('divid');
    $('#' + divId).toggle();
});

this上記のコードで使用したことに注意してください。何thisを参照するかは、使用するコンテキストによって異なりますが、jQuery イベント ハンドラー コールバック関数のコンテキストでは、イベントをトリガーした要素 (この場合はユーザーの<a>要素) を常に参照します。

于 2012-12-04T14:06:00.980 に答える
0

ハンドラから toggleDiv を抽出すると、動作するはずです。href がどこにも行かないようにするには、おそらく false を返す必要もあります。

<script type="text/javascript">
    function toggleDiv(divId) {
        $("#"+divId).toggle();
        return false;
    }
</script>
于 2012-12-04T14:10:50.230 に答える