如何将 jQuery 对象保存在数组中以供以后使用?
我有一些用户用鼠标选择的图标。
我有这一系列的图标,我可以在其中选择并设置它们的边框。我将所选图标的数量限制为 5 个。第一个选择的图标将变成黄色边框图标。接下来的 4 个是黑色边框。
在 document.ready 上,我这样做:
$('img.selectable').click(function(){ 图像_点击(这个); });
对于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 领域时,它就失去了公民权利。我不知道如何访问它的数据变量。
请帮忙! 谢谢!
I have some icons that the user is picking with his mouse.
I have this series of icons where I can select and set their border. I am limiting the number of chosen icons to 5. The first selected would become a yellow border one. The next 4 would be black border.
On document.ready, I do:
$('img.selectable').click(function(){
image_click(this); });
For the CSS:
.selectable {
border: 3px solid #ebe6b3;
float:left;
margin:1px;
}
For the HTML:
<img class="selectable" src="img/first_icon.png">
I have this function:
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);
}
}
}
};
There has to be a first icon, which will be yellow all the time. I was thinking of doing it with an order array, which stores the order of the objects.
The thing is I didn't seem to be able to call an object from the array and still preserve it's css function.
I was thinking of something like:
var x=[];
inside image_click(e){..
at some point I store the object:
$(e).data("order",clicked_img);
x[clicked_img]=e;
and when I pop it out:
alert(x[clicked_img].data("order"));
...}
BUT....
Seems like I have no acces to the data anymore. Like when the object left the jQuery realm it has lost it's civil rights. I don't know how to access it's data variables.
Help please!
Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您保存的是 DOM 元素,而不是 jQuery 对象。应该
不是
You saved the DOM element, not the jQuery object. It should be
not
简单的解决方案:将其放回 jQuery 领域。您有几个选择:
或:
或:
目前不推荐后者,因为我不确定跨浏览器的影响,但无论如何,这就是您在“常规”JavaScript 中执行此操作的方式。
我建议使用第一种方法,在这种情况下,您还应该将
$(e)
分配给image_click
开头的变量,这样它就不会重建 jQuery每次都反对。Simple solution: put it back in the jQuery realm. You have a couple options:
or:
or:
The latter is not recommended for now as I'm unsure of the cross-browser implications, but in any case, that's how you do it in "regular" JavaScript.
I'd suggest the first method, in which case you should also be assigning
$(e)
to a variable at the beginning ofimage_click
so it doesn't rebuild the jQuery object every time.