0

こんにちは、すべてフロントエンド開発に j クエリを使用しています。保守可能な js を作成するための js の初心者です。私の質問は、すべての要素の id を使用しているため、html のすべての要素に対してシングル クリック イベント関数を作成する方法があるかどうかです。このような。

html

<a id="get-in" class="">Login
  <div class="log-n-contanier">
      <form id="login">
      <input type="text" placeholder="Email Address" />
         <br>
        <input type="password" placeholder="Password" />
         <br>
<button class="btn blue med large" id="login-trigger">LOGIN</button>
<span id="forgot-trigger">forgot password?</span>
</form>
<form id="forgot">
 <input type="text" placeholder="Email Address" />
        <br>
    <button class="btn blue med large">Send Instructions</button>
    <span id="cancel-trigger">cancel</span>
    </form>
    </div>
</a>

$('button, a').click(function(){
     ids=$(this).attr('id');
     if(ids=='get-in'){

        $('.log-n-contanier').show();
        $(this).addClass('active');
     }
        else if(ids=='login-trigger')
        {
            alert('you were loggging');
        }
        else if(ids=='forgot-trigger'){
            $('#login').hide();
            $('#forgot').show();
        }
        else if(ids=='cancel-trigger'){
            $('#forgot').hide();
            $('#login').show();
        }
        else{
            alert('over');
        }
     });

などを使用してコードを縮小する方法event bindings..? すべての tym には、ID 名またはクラス名を記述する必要があるため..! それは正しい書き方ですか、それとも他の方法はありますか..？

4

2 に答える 2

1

jQuery から返されたオブジェクトをキャッシュすることをお勧めします。パフォーマンスの観点から優れており、可読性も向上します。たとえば、$('#forgot')を何度も繰り返す代わりに、次のように記述します。

var forgotButton = $('#forgot');
...
forgotButton.hide();

このアプローチを使用すると、すべての jquery 参照をコードの先頭に配置できます。後で別のライブラリに切り替えることにした場合は、1 つの場所だけを変更する必要があります。

于 2013-09-23T07:15:37.877 に答える
1

繰り返しの量は非常に少ないため、心配する必要はありません。

ただし、リンクごとに個別のイベント ハンドラーを登録する必要if (id === ...)があります。これにより、一連のブランチ全体を記述する代わりに、ブラウザーがイベントを適切なハンドラーに直接ディスパッチできるようになります。

$('#get-in').on('click', function(){
    $('.log-n-contanier').show();
    $(this).addClass('active');
});

$(#'login-trigger').on('click', function() {
    alert('you were loggging');
});

$('#forgot-trigger').on('click', function() {
    $('#login').hide();
    $('#forgot').show();
});

$('#cancel-trigger').on('click', function() {
    $('#forgot').hide();
    $('#login').show();
});

関数内の繰り返しが扱いにくくならない限り、これをリファクタリングする必要はありません。

また、これがイベントトリガー呼び出しではなく、イベント登録呼び出しであることを強調するの.on('click', ...)ではなく、常に使用していることにも注意してください。.click

于 2013-09-23T08:14:58.857 に答える