0

私はこのようないくつかのセクションがあります：

<section class="one">
    <div class="two  over"  element="myelement1">
          <div class="front" >
            <img src="element.jpg" width ="100%;" height ="100%;" alt="">
          </div>
          <div class="back">                        
          </div>
        </div>          
</section>
<section class="one ">
    <div class="two over"  element="myelement2">
          <div class="front" >
            <img src="element2.jpg" width ="100%;" height ="100%;" alt="">
          </div>
          <div class="back">                        
          </div>
        </div>          
</section>

次に、次のような関数があります。

var i = j =0;
$(function () {
    $('.over').hover(function () {
     /*do something*/
    }, function () {
                if ( $(this).attr('element') == 'myelement1'){
            img = $(this).find('img');
            img.attr('src', arr_1[i]);
            i++;
            if(i > arr_1.length-1) i=0;   
        }
                if ( $(this).attr('element') == 'myelement2'){
            img = $(this).find('img');
            img.attr('src', arr_2[j]);
            j++;
            if(j > arr_2.length-1) j=0;   
        } 

     });
})

グローバル変数または辞書にそれぞれの値を格納するにはどうすればよいですか？img = $(this).find('img'); ユーザーがいるたびにではなく、一度だけこれを実行し.hoverますか？

4

1 に答える 1

1

まず、解決しようとしている問題を解決する必要はおそらくないでしょう。最近のコンピューターは非常に高速であるため、オブジェクトの子でimgsを検索するのは非常に高速です（おそらく数千の場合を除く）。したがって、ここに本当に問題があるという実際のパフォーマンスデータがない限り、おそらくこれを最適化しようとすべきではありません。

最適化する前に必ず測定して、実際にどのような問題があり、実際に解決する必要があるかを確認してください。次に、考えられる解決策を測定して、実際に必要なことを実行しているかどうかを確認します。

あなたが尋ねる実際の質問に関しては、いくつかの選択肢があります。

初めて取得してから、グローバルに保存するだけです。

var i = j =0;
var imgs1, imgs2;
$(function () {
    $('.over').hover(function () {
     /*do something*/
    }, function () {
        if ( $(this).attr('element') == 'myelement1'){
            if (!imgs1) {
                imgs1 = $(this).find('img');
            }
            imgs1.attr('src', arr_1[i]);
            i++;
            if(i > arr_1.length-1) i=0;   
        }
        else if ( $(this).attr('element') == 'myelement2'){
            if (!imgs2) {
                imgs2 = $(this).find('img');
            }
            imgs2.attr('src', arr_2[j]);
            j++;
            if(j > arr_2.length-1) j=0;   
        } 

     });
})

または、jQueryの精神で、.data()グローバルの代わりに使用します。

var i = j =0;
$(function () {
    $('.over').hover(function () {
     /*do something*/
    }, function () {
        var imgs = $(this).data("imgList");
        if (imgs) {
            imgs = $(this).find('img');
            $(this).data("imgList", imgs);
        }
        if ( $(this).attr('element') == 'myelement1'){
            imgs.attr('src', arr_1[i]);
            i++;
            if(i > arr_1.length-1) i=0;   
        }
        else if ( $(this).attr('element') == 'myelement2'){
            imgs.attr('src', arr_2[j]);
            j++;
            if(j > arr_2.length-1) j=0;   
        } 

     });
})
于 2013-03-14T03:32:52.140 に答える