如何在我的數組中保存jQuery對象以備後用？

Question

我有一些圖標，用戶正在用他的鼠標選擇。

我有這一系列的圖標，我可以選擇並設置其邊框。我將所選圖標的數量限制爲5.第一個選定的圖標將變成一個黃色邊框。接下來的4將是黑色邊框。

上的document.ready，我做的：

$（ 'img.selectable'）點擊（函數（）{ 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領域時，它已經失去了它的公民權利。我不知道如何訪問它的數據變量。

請幫忙！ 謝謝！

Answer 1

就像當對象離開了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對象。

Answer 2

您保存了DOM元素，而不是jQuery對象。它應該是

x[clicked_img]=$(e); 

不

x[clicked_img]=e;