1

だから私はCodepenで取り組んでいるこのアイデアを持っています. そのまま動作していますが、クリック可能な領域を追加する前に、リファクタリングと DRY の大幅な必要性に気付きました。これまでのところ動作しますが、非常に見苦しく、大量のコードを繰り返す必要があります。

$(.class).click(function() { ... });そのため、多くの関数を、代わりに $(this) を使用して単一の .click 関数を設定する switch ステートメントに置き換えようとしています。しかし、私は迷っています。

ここですべてを確認し、編集することもできます: http://codepen.io/lukewatts/pen/ubtmI

近づいた気がしますが、壁にぶち当たりました。一番上のコメントアウトされた部分は DRY の試みであり、今のところコメントアウトされていないのは作業バージョンです。min、off、max の単語または LED をクリックして動作を確認します。

これについてアドバイスをいただき、ありがとうございます。正直なところ、PHPは私のメイン言語です。

PS私は持っていてleds.click(function() { ... })、それを交換しましたleds.on(function() { ... })が、まだ何もありません。

4

4 に答える 4

1

switch ステートメントが機能しない理由は、jQuery オブジェクトを作成するたびに Id が取得されるため、switch が$thisのようなセレクターと比較しようとすると$(p.min a)、それらが等しくないためです。ただし、 で複数の if ステートメントを使用した場合は、次の$.isように比較できます。

$this = $(this)
if($this.is('p.min a')) {
   // do work
} else if($this.is('p.max a')) {
   // do work
}

ただし、この方法はお勧めしません。より複雑なページについては、Knockout.js のようなバインディング フレームワークをお勧めします。小さなものでは、多くの複雑さが追加されます。明確にするために：これがより大きなコントロールセットまたはシステムの一部になる場合、バインディングフレームワークが役立ちます。そのままのコントロールでは、バインディング フレームワークと OP の現在のアプローチの両方が過剰です。

于 2013-09-20T13:26:34.617 に答える
1

あなたがやろうとしていることは理解していますが、jQuery オブジェクトがどのように機能するかはわかりません。オブジェクトがセレクターに一致するかどうかを確認するには、 を使用する必要があります.is()。

そのため、 a を使用することはできませんがswitch、一連の連鎖ifした s を使用して、試みている方法で目標を達成する必要があります。

if ( $this.is('.led[data-level="one"]') )
   var led = $('p.min a');
   var level = "one";

このように動作するように CodePen の例を更新しました。Codepen

ただし、質問へのコメントで述べたように、ここではコードのレビューは行っておらず、うまくいかなかったことを修正しているだけです。完全に正直に言うと、これが実際にあなたの乱雑な元のアプローチよりも優れたアプローチであるかどうかはわかりません。

于 2013-09-20T13:32:55.893 に答える
0

イベントの委譲を見たいと思うかもしれません。物事を DRY に保つのに非常に役立つと思います。クリックすると、DOM ツリーが上位の要素にバブルアップし、先祖の要素にハンドラーを登録できます。複数の要素にバインドするのではなく、1 つのハンドラーを 1 つの要素にバインドするだけなので、これは実際には理想的です。したがって、よりクリーンなコードに加えてパフォーマンス上の利点を実現できます。

まず、すべての.led要素を aでラップし<div id="leds">ます。

 <div id="leds">
     <a href="#" class="led" data-level="one"></a>
     <a href="#" class="led" data-level="thirteen"></a>
 </div>

ハンドラーを作成します。

   $('#leds').bind('click', function(e){
    var target = e.target;
    var $target = $(target);

       //do interesting stuff
       if (target.nodeName === 'A') {
            var level = $target.data('level');
            if(level = 'one'){
                //do more interesting stuff
            }
        }       
     }
    });
于 2013-09-20T13:20:12.270 に答える