jQuery对象设计

这是我目前的jQuery流程：创建jQuery对象设计

对象。
Object有一个名为draw（）的函数，它返回一个包含其HTML表示的字符串。
容器已创建。
容器也有一个函数draw（），它执行相同的操作。
使用$（'。class'）。append（...）将Object和Container都绘制到两个单独的div上。
对象的div是可拖动的，Container的div是可放下的。

上述工作。但以下是我偶然发现的地方：

容器容器包含一个对象数组。当用户将一个Object div放到Container div上时，我想将该Object添加到Container数组中。

是我唯一的选择，为每个对象添加一个唯一的ID，使用该ID创建Object div，使用唯一的Container ID将Object拖放到Container div上，然后对这两个ID执行查找？

编辑：好的，也许我可以更好地抽象它。

我在屏幕上有交易卡和卡片包。交易卡片是带有怪物图片的小方形盒子，卡片包装是小灰盒子。当您将一张交易卡放入卡片包时，交易卡消失，在卡片包内放置一张交易卡的小图片。

所以每个卡包都有一个交易卡的容器。每个对象TradingCard和CardPack都有一个.draw（）方法，用于创建一个表示该对象如何绘制的HTML字符串。然后，您可以使用JQuery将该字符串附加到屏幕上的任何对象。

现在，关于回到我最初的帖子：

的TradingCard可拖动，并且CardPack是可弃。当一个TradingCard被放到一个CardPack上时，JQuery的droppable中的一个函数被调用。我想要该函数将该卡添加到CardPack的阵列中。

来源

2012-01-20 sdasdadas

我想我遵循的基本逻辑，但一个jsfiddle会帮助我们理解你的代码。 – davidethell

'集装箱容器包含'脑冻结。 –

垃圾，我很难摆出那些对我来说很清楚的问题。 A - > HTMLA; B - > HTMLB; 将HTMLA拖放到HTMLB。 ...？; 将A添加到B的阵列。 – sdasdadas

我不知道如果我完全跟着你，但这样的事情应该工作，作为最好的，我能理解你的问题：

// [object] has this general structure 
var obj = { 
    draw : function() { 
     return $('<p></p>'); 
    } 
}; 

// [container] has this general structure 
var container = { 
    objects : [], 
    draw : function() { 
     var el = $('<div></div>'); 
     $.each(this.objects, function (v,i) { 
      el.append(v.draw()); 
     }); 

     return el; 
    } 
};

，这样就可以使用这些以这种方式：

// where foo and bar are [object]s 
container.objects.push(foo); 
container.objects.push(bar); 

$('#main').append(container.draw());

但是，再次，我可能只是在这里误解你。

来源

2012-01-20 17:39:16

是的，你了解我（成功？）。但是，当我真正将obj放在容器上时（因为我放弃了JQuery对象，而不是JS），那个代码就是导致我遇到问题的原因。 – sdasdadas

使用jQuery对象而不是普通的JS对象有什么问题？ jQuery对象也是JS对象，首先也是最重要的，所以你可以按照我上面详细描述的方式去做 - 这个问题是在jQuery对象本身上附加了新的功能。你可以用很多方法来做到这一点，比如使用'.extend（）'或者用'$ .fn.draw = function（）{}''创建一个新的包装器方法。 –

但是，当我把艾尔放到'

'标签上时，我该如何调用container1.objects [0] = obj1？ – sdasdadas

我觉得我理解的问题是overcomplicatedly（！笑）说..

短Asnswer：是的。

说明，您可以通过索引或ID（如果您给它们）访问数组中的项目。索引的问题在于，您必须在项目添加（并删除？），这可能可以在一个单独的结构中在两个结构之外进行管理，但是这增加了更多不必要的复杂性。

我认为你可以把你的“对象”放到容器中，然后单独访问容器，但是，除非有一些父/子层次结构，你怎么知道要到哪个容器？那么只要从容器中读出物品......他们肯定会按照他们“放入”的顺序排列，但除非你知道什么时候被“丢弃”，否则你将永远无法猜测哪些物品是如果你知道“droppable”（lol）对象的内容，那么这个内容就是独特的id/content（假设内容是不同的），因为你可以通过他们的内容太

......哦，在阅读我的文章后，我希望我已经提供了一些澄清..我认为，如果你列出了你想达到的目标，这将更容易理解你为什么'重新采取这种做法..

来源

2012-01-20 17:50:27 hanzolo

jQuery对象设计

回答

相关问题