1

HTML

<!doctype html>
<html>
<head>
</head>
<body>
<button id="b1" type="button">Show Spoiler</button>
<p id="p1" style="display:none"> This is a damn paragraph.</p>

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

JS

function bindEvent(element, eventName, eventHandler) {
    var el = $(element)[0];
    if (el.addEventListener) {
        el.addEventListener(eventName, eventHandler, false)
    } else if (el.attachEvent) {
        el.attachEvent('on'+eventName, eventHandler);
    }
}
bindEvent('#b1', 'click', function() {
    $('#p1').toggle('blind');
    if ($('#b1').text() == 'Show Spoiler') {
        $('#b1').text('Hide Spoiler');
    } else if ($('#b1').text() == 'Hide Spoiler') {
        $('#b1').text('Show Spoiler');
    }

});

私はjQueryとJavascriptが初めてなので、この簡単なスクリプトを作成して、段落を表示および非表示にし、クリックするたびにボタンのテキストを変更しました。私の問題は、これが少し不格好に見えることです。同じ結果を達成するためのより良い、より短く、より簡単な方法はありますか?

4

2 に答える 2

1

すばらしい jquery を使用して、単純な 3 行のコードでこれを機能させることができます。ボタンクリックイベントをトリガーし、クリックすると->要素「P」を切り替えます。これは役立つはずです：作業デモ

$("#b1").click(function () {
      $("#p1").toggle('slow');
    });​
于 2012-06-24T22:19:25.890 に答える
1

まず第一に、jQuery はすでにブラウザー間で DOM イベント リスナーを正規化しているため、bindEvent関数はもう必要ありません。jQuery APIで自分で検索できるものを使用して、自分がしていることを行う簡単な方法を次に示します。

var $b1 = $('#b1')
  , $p1 = $('#p1')
  , hideText = 'Hide Spoiler'
  , showText = 'Show Spoiler'

$b1.on('click',function() {
    var text = $b1.text()
      , newText = text === showText ? hideText : showText
    $p1.toggle('blind')
    $b1.text(newText)
})

注意すべき点がいくつかあります。

  • サンプル関数は、単一のスポイラー#p1と単一の公開ボタンを想定しています#b1。.spoiler本番環境では、これはおそらくやなどのクラスに基づいて.spoiler-triggerおり、ページには複数のスポイラーがあります。その場合、 の値を取得する必要がありますthis。この例では、公開ボタンが常にスポイラー自体の兄弟であると仮定しましょう。

    $('.spoiler-trigger').on('click',function() {
    var $this = $(this)
      , $thisSpoiler = $this.siblings('.spoiler').eq(0)
      , text = $this.text()
      , newText = text === showText ? hideText : showText
    $thisSpoiler.toggle('blind')
    $this.text(newText)
})

  • jQuery.onメソッドは、クロス ブラウザー イベント リスナー関数であり、使用を開始する必要があります。

  • $(this)やのように繰り返し使用する jQuery セレクターは$('#b1')、パフォーマンスのためにローカル変数にキャッシュする必要があります。
  • if ステートメントの代わりに三項条件を使用して、テキストの表示/非表示を決定しています。これは、この非常に単純なケースでは読みやすいと考えているためです。
于 2012-06-24T22:20:31.390 に答える