1

我在一条水平线上有以下 DOM 元素：

  1. 包含一行文本的 div；即“你好世界”。此 div 的宽度与包含的文本相同。
  2. 交换两个 div 的按钮。
  3. 一个包含列表框的 div。此 div 的宽度与包含列表框的宽度相同。

With floator position:absoluteI 可以将这些元素正确对齐在一行上。但是，当用户单击交换按钮时，div 应该交换位置。我不希望从 DOM 中删除 div 并将它们再次添加到彼此的位置。这是因为元素实际上是 Javascript 对象（更具体地说是 Google 闭包库组件），它们保存变量并附加了事件处理程序。是否可以使用 CSS 交换 div，而不为 div 分配静态宽度？

简化示例：

<div style="position:relative; height:60px;">
  <div style="float:left;">Our Team</div>
  <div style="float:left;"><button onclick="swap();">swap home/away</button></div>
  <div style="float:left;"><select><option>Opponent A</option><option>Opponent B</option></select></div>
</div>
<div style="clear:both;"></div>

当用户单击按钮时，第一个（我们的团队）和第三个（对手）div 应该在浏览器中视觉交换，最好不要从 DOM 中删除元素。

4

3 回答 3

4

我不希望从 DOM 中删除 div 并将它们再次添加到彼此的位置。这是因为元素实际上是 Javascript 对象（更具体地说是 Google 闭包库组件），它们保存变量并附加了事件处理程序。

最好的解决方案是移动DOM 中的元素。这样做将保留现有的事件处理程序，这意味着您的代码应该仍然可以工作：

http://jsfiddle.net/thirtydot/LGGW2/

function swap() {
    var target1 = document.querySelector('#swapMe > :first-child');
    var target2 = document.querySelector('#swapMe > :last-child');

    var parent = target1.parentNode;
    parent.insertBefore(target1, null);
    parent.insertBefore(target2, parent.firstChild);
}​

我假设您已经参考了要交换的元素，因此您可以document.querySelector用任何合适的内容替换这些行。

写完这个答案后，我搜索了一个更通用的“swap”函数，发现这个看起来不错：Swap 2 html elements and preserve event listeners on them

于 2012-11-26T13:03:14.120 回答
1

在你的HTML两个 div 是相同的(style="float:left;")，没有class或id所以你只能交换HTML两个 div，即

function swap(e)
{
    e  = e || window.event, target = e.target || e.srcElement;
    var nEl=getElem(target.parentNode, 'next');
    var pEl=getElem(target.parentNode, 'prev');
    var pElHtml=pEl.innerHTML, nElHtml=nEl.innerHTML;
    pEl.innerHTML=nElHtml;
    nEl.innerHTML=pElHtml;
}

function getElem(elem, which) {
    if(which==='next') which='nextSibling';
    else if((which==='prev')) which='previousSibling'; 
    do{
        elem = elem[which];
    }
    while (elem && elem.nodeType != 1);
    return elem;        
}​

演示。

于 2012-11-26T12:20:53.140 回答
0

对于你的问题，我有一些解决方案。一两个与你的风格有关。如果我是你，我会删除内联样式（除非由 javascript 添加）并将相同的类添加到所有“浮动”元素。

对于更多更新的浏览器，这将完美地工作：

.floaters{
    display:inline-block;
}

但对于较旧的浏览器（即 5.5、6、7、8），您需要申请：

.floaters{
    display:inline;
    float:left;
    height:60px;/*set a default height*/
}

现在为swap();功能。我不确定你是如何应用这个的，但我会通过改变它们来交换元素innerHTML();

function swap(){
    var ele1HTML = document.getElementById('ele1').innerHTML();
    var ele3HTML = document.getElementById('ele3').innerHTML();
    document.getElementById('ele1').innerHTML(ele3HTML);
    document.getElementById('ele3').innerHTML(ele1HTML);
}

但是上面的以下代码将要求您将 ID 属性添加到您的 div 中。这是一个例子：

<div id="menu">
  <div id="ele1" class="floater">
      Our Team
  </div>
  <div id="ele2" class="floater">
      <button onclick="swap();">swap home/away</button>
  </div>
  <div id="ele3" class="floater">
      <select>
          <option>Opponent A</option>
          <option>Opponent B</option>
      </select>
  </div>
</div>
<div id="anotherDiv"></div>

但不要忘记重新应用您的样式：

#menu{
    position:relative;
    height:60px; /*not needed for the older browser as I've set the child elements to 60px;*/
}
#anotherDiv{
    clear:both;
}
于 2012-11-26T12:20:53.347 回答