如何将 jQuery 对象保存在我的数组中以供以后使用？

Posted 2023-05-07

【中文标题】如何将 jQuery 对象保存在我的数组中以供以后使用？

【英文标题】：How can I save a jQuery object in my array for a later use?

【发布时间】：2011-08-01 06:53:16

【问题描述】：

我有一些用户用鼠标选择的图标。

我有这一系列图标，我可以在其中选择和设置它们的边框。我将所选图标的数量限制为 5 个。第一个选择的图标将变为黄色边框。接下来的4个将是黑色边框。

在 document.ready 上，我会这样做：

$('img.selectable').click(function() image_click(这个); );

对于 CSS：

.selectable 
    border: 3px solid #ebe6b3;
    float:left;
    margin:1px;

对于 html：

<img class="selectable" src="img/first_icon.png">

我有这个功能：

function image_click(e)

    if($(e).data("clicked")=="yes")
    
        images_selected--;
        $(e).data("clicked","no").css('border','3px solid ' + NEUTRAL_COLOR);
        if(images_selected==1)
        
          $('img.selectable').not( e ).filter(function() 
                    return $( this ).data("clicked")=="yes";
                     ).css('border','3px solid ' + YELLOW_COLOR);

        
    
    else
    
        if (images_selected<5)
        
            images_selected++;
            if(images_selected==1)
            
                $(e).data("clicked","yes").css('border','3px solid ' YELLOW_COLOR);
            
            else
            
                $(e).data("clicked","yes").css('border','3px solid ' + BLACK_COLOR);
            
        
    
;

必须有一个第一个图标，它始终是黄色的。我正在考虑用一个存储对象顺序的顺序数组来做这件事。 问题是我似乎无法从数组中调用一个对象并仍然保留它的 css 函数。

我在想这样的事情：

var x=[];

在image_click(e)..内

有时我会存储对象：

    $(e).data("order",clicked_img);

    x[clicked_img]=e;

当我弹出它时：

    alert(x[clicked_img].data("order"));
...

但是.... 似乎我再也无法访问数据了。就像当对象离开 jQuery 领域时，它已经失去了公民权利。我不知道如何访问它的数据变量。

请帮忙！ 谢谢！

【参考方案1】：

您保存的是 DOM 元素，而不是 jQuery 对象。应该是

x[clicked_img]=$(e);

不是

x[clicked_img]=e;

【讨论】：

是的，这就是答案。很遗憾我不能将你们两个都标记为已回答，只有一个。我标记了另一个答案，因为它更广泛，信息更丰富，但是谢谢！

【参考方案2】：

就像当对象离开 jQuery 领域时它已经失去了它的文明 权利。

简单的解决方案：将其放回 jQuery 领域。你有几个选择：

x[clicked_img] = $(e);
// ...
alert(x[clicked_img].data("order"));

或：

x[clicked_img] = e;
// ...
alert($(x[clicked_img]).data("order"));

或：

x[clicked_img] = e; // assuming e is the DOM element, not the event
// ...
alert(x[clicked_img].dataset.order);

目前不推荐使用后者，因为我不确定跨浏览器的影响，但无论如何，这就是你在“常规”javascript 中的做法。

我建议第一种方法，在这种情况下，您还应该将$(e) 分配给image_click 开头的变量，这样它就不会每次都重建jQuery 对象。