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 回答