Question

我正在使用Flask + Jinja2 + Bootstrap 3编写一个Web应用程序，使用Jquery来控制我想要做的很多UI交互。然而，我添加的新功能证明是非常复杂的，我担心我目前的写作方式低于标准。目前我有一个有很多div的网站（通过jinja2循环创建）。每个div都有一个唯一的id。在每个div中，我有一个多层div网络，但我给了他们一个id（也许是错误的）。因此，当它循环时，它创建了许多具有相同id的相同结构，嵌入在唯一的内部。

E.g。

<div class='galinfo' id='gal_uniqid1'>
   <div class='panel' id='qapanel'>
       <select id='qaselect'>...
       <button id='qabutton'>...
   </div>
</div>

<div class='galinfo' id='gal_uniqid2'>
   <div class='panel' id='qapanel'>
       <select id='qaselect'>...
       <button id='qabutton'>...
   </div>
</div>

<div class='galinfo' id='gal_uniqid3'>
   <div class='panel' id='qapanel'>
       <select id='qaselect'>...
       <button id='qabutton'>...
   </div>
</div>

etc...

在这些div中，我有一堆jquery函数，当单击各种按钮，选择选项，切换切换等时运行。每个唯一div中的所有功能都是相同的。但是，我开始意识到这一点

1。）我发现自己必须在多个功能中反复选择相同的东西

2。）这在我的ID相同的情况下效果不佳。选择id =＆＃39; qabutton＆＃39;只抓取列表中的第一个元素，即id =＆＃39; gal_uniaid1＆＃39;。我不得不求助于像$（＃gal_uniqid2 qabutton）这样长期复杂的选择来抓住我想要的那个。

3。）如果我将所有松散分散的jquery函数合并到一个jQuery类对象中，这可能会更容易。

我想要做的是构建一个我可以实例化的通用jQuery对象，并附加到每个唯一的div。例如。一个名为Qainfo（）的类，然后执行类似

的操作

qainfo = Qainfo（id =＆＃39; gal_uniqid1＆＃39;），并以某种方式将其附加到我的id =＆＃39; gal_uniqid1＆＃39; DIV。同样，我在第二个div上有qainfo = Qainfo（id =＆＃39; gal_uniqid2＆＃39;）。

然后我可以直接调用我的方法，qainfo.dobuttonstuff（），qainfo.writeStuff（）等，它知道在类中建立所有正确的嵌套链接，最终我目前在哪个独特的div ，哪些面板和按钮对应什么等等。

这样的事情可能吗？谢谢。

连接多个javascript＆＃34; class＆＃34;对象到html div元素

0 个答案: