Question

我有几个这样的部分：

<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？

Answer 1

首先，您可能不需要解决您尝试解决的问题。现代计算机是如此之快，以至于搜索对象的子对象是非常快速的操作（除非可能有数千个）。所以，除非你有实际的性能数据表明这里确实存在问题，否则你可能根本不应该尝试优化它。

在优化之前始终进行测量以了解实际存在哪些问题并且实际需要解决。然后，测量任何可能的解决方案，看看它是否真的在做你需要的。

至于你问的实际问题，有几个选择。

您可以在第一时间检索它，然后将其保存在全局：

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;   
        } 

     });
})

使用jquery保存在全局变量img属性位置

1 个答案: