0

jQueryセレクターをより構成可能にするためのアドバイスを探しています。たとえば、PHP によって生成された次の HTML があるとします。

<ul id="my-list">
    <li>first</li>
    <li>second</li>
</ul>

そして少しの jQuery:

$(function() {
    $(document).on("click", "#my-list li", function() {
        alert("You clicked " + $(this).text());
    });
});

ここまでは順調ですが、ある日、デザイナーがやってきて、ID「my-list」の名前を「list-of-numbers」に変更すると、javascript が機能しなくなります。現在、解決策は、「my-list」への参照についてコードを grep することを覚えていますが、それは非常に不完全です。セレクターを構成可能にするためのjQueryデザインパターンはありますか?

4

2 に答える 2

1

これは「セレクター選択」と呼ぶことができます。ソリューションとして、セレクターを含む変数のセットを定義できます。

var selectors = { myLi: "#my-list li",
                  myUl: "#my-div ul" };

次に、オブジェクトルックアップを実行してセレクターを取得できます。

$(selectors.myLi);

これには、読み取り可能で動的であるという利点があります。ただし、誰かがを変更するシナリオの例ではID、変更が必要であることがコードのどこかに明示的に記載されていない限り、これはあまり役に立ちません。

いくつかの委任を実行し、カスタムデータ属性を使用してロールを定義することを検討することをお勧めします。

于 2013-01-10T09:18:10.820 に答える
0

JS コードの先頭に一連のセレクターを定義します (使用する内容についてコメントを追加することを忘れないでください)。

var selectors = {
  'listSelector':'#my-list li' /* DESC */,
  'nextSelector': '.whatever'
}

クエリでそれらを使用します。

 $(document).on("click", selectors.listSelector, function() {
    alert("You clicked " + $(this).text());
 });
于 2013-01-10T09:14:14.263 に答える