处理页面上多个相同div的最佳方法 [英] Best way to deal with the same div multiple places on the page

问题描述

我有一个相当大的div。也许20个字段。

我使用这种形式创建新用户并编辑现有用户。我有一个用户搜索，如果你点击结果列表中的任何结果，它会显示这个表格。点是，我使用它很多，并在多个地方。

我的问题是什么是最好的策略来管理这个？

我的第一个想法是创建表单并在页面加载时隐藏它。然后将其附加到我需要的地方并显示出来。但是，当我试图在包含此表单的容器上使用空时，它变得非常复杂，因为我将永远无法再使用它。

创建一个全局变量： var MY_FORM = $（＃MyForm）; 只需使用 .append（MY_FORM）每当我需要它，但这是行不通的。

然后我考虑使用 .html（）来复制无论我需要它的形式。但是，这种复制的ID很复杂。 .button（）要求我使用需要依赖于按钮id属性的for属性的标签，该属性将与表单的多个实例重复。

我最近的想法是只在可能需要的地方创建表单，并在适当的时候显示。

正如你所看到的，我很矛盾，我的头痛，现在仍然是上午8点我在哪里...： - （

非常感谢您的任何帮助，谢谢！

可以想到一个更好的标题可以自由地改变它。

解决方案

您的解决方案与全局变量和append方法应该工作

 < div id =place1class =formplacer> 
< button class = getform>在此处显示< / button> 
< / div> 
< div id =place2class =formplacer> 
< button class =getform >带格式< / button> 
< / div> 
< div id =place3class =formplacer> 
< button class =getform >在此输入表格< / button> 
< / div> 
 
< form id =multiform> 
输入
 < input type =textname =field1/> 
< input type =submitname =submitvalue =sumbit/> 
< / form> 
  

示例 jquery

  var myform = $（'＃multiform'）。detach（）; 
 $ b $（'。getform'）。click（function（）{
 $（this）.closest（'。formplacer'）。append（myform）; 
}） ; 
  

---

更新 >
（带动画，不使用分离，因为它不是真的需要.. ）

  var myform = $（'＃multiform'）。hide（0）; 
 $ b $（'。getform'）。click（function（）{
 var base = this; 
 myform.slideUp（'slow'，function（）{
 $（base）.closest（'。formplacer'）。append（myform.slideDown（'slow'））; 
}）; 
}）; 
  

演示： http://jsfiddle.net/gaby/aCnuR/6/

I have a div that is a rather large form. Maybe 20 fields.

I use this form for creating a new user and editing an existing one. I have a user search and if you click on any result in the result list it shows this form. Point being, i use it a lot, and in multiple places.

My questions is what is the best strategy to manage this?

My first idea was to create the form and hide it when the page loaded. Then append it to where I needed it and show it. But then it got very complicated when I tried to use empty on the container that contained this form, as I would them never be able to use it again.

So I tried creating a global variable: var MY_FORM = $("#MyForm"); And just use .append(MY_FORM) whenever I needed it, but this did not work.

I then thought about using .html() to replicate the form wherever I needed it. But this gets very complicated with replicated ids. .button() requires that I use a label which needs a for attribute that relies on the buttons id attribute which would be duplicated with multiple instances of the form.

My latest thought was to just create the form wherever it could possibly be needed and just show it when the time was right.

As you can see I'm quite conflicted and my head hurts and it's still 8 A.M. where I am... :-(

Any help is greatly appreciated, Thanks!

P.S. if you can think of a better title feel free to change it.

解决方案

Your solution with the global variable and the append method should work (if implemented correctly)

Check a demo at http://jsfiddle.net/gaby/aCnuR/

example html

<div id="place1" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place2" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place3" class="formplacer">
    <button class="getform">Bring form here</button>
</div>

<form id="multiform">
    input
    <input type="text" name="field1" />
    <input type="submit" name="submit" value="sumbit" />
</form>

example jquery

var myform = $('#multiform').detach();

$('.getform').click(function(){
    $(this).closest('.formplacer').append(myform);
});

---

UPDATE
(with animation and not using detach as it is not really required..)

var myform = $('#multiform').hide(0);

$('.getform').click(function(){
    var base = this;
    myform.slideUp('slow', function(){
        $(base).closest('.formplacer').append(myform.slideDown('slow'));
    });
});

demo: http://jsfiddle.net/gaby/aCnuR/6/

这篇关于处理页面上多个相同div的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！