Question

我尝试交换两列。这应该替换 div＃navigace div #text 。 selectors变量应该能够交换元素对。

var selectors = "div#navigace;div#text"
selectors = selectors.split(";");
    var searches = [];
    var targets = [];
    for ( var k in selectors )
      {
      if ( (k % 2) != 0 )
        searches.push(selectors[k]);
      else
        targets.push(selectors[k]);      
      }

    for ( var k in searches )
      {
      var cloned = $(searches[k]).clone(true); // clone col.#1
      $(searches[k]).replaceWith($(targets[k])); // reúůace col.#1 with col #2
      $(targets[k]).replaceWith(cloned); // replace col. #2 with clone of #1
      }

这是列所在的site，我从Firefox webextensions注入代码。简而言之：

<!DOCTYPE html>
<script src="jquery_3.0.0" charset="utf-8" type="text/javascript"></script>
<script src="my_code_comes_here.js" charset="utf-8" type="text/javascript"></script>

<html>
<body>
<div id="text">

<div class="velke">
    <h1>How to write www</h1>
</div>
</div>

<div id="navigace">
<h3>Favourites:</h3>
</div>

<div id="hlavicka">
</div>

<div id="hrasek"></div>

</body>

</html>

会发生什么：左栏消失，右栏留在原位。

应该发生什么：左栏应显示在左侧，右栏显示在左侧。在上面的短html的情况下，上部div应该放在底部，底部应该放在上面。

编辑： Live example

Answer 1

我发现了两个问题。

1）selectors.split(";");返回一个新数组，它不会修改原始字符串变量。所以你需要做任何一件事：

var selectors = "div#navigace;div#text".split(';');

或

var selectors = "div#navigace;div#text";
selectors = selectors.split(";");

你的代码不是这样的，它只是循环遍历字符串div#navigace的每个字母，并不完全理想。

2）您正在尝试执行jQuery操作，但jQuery实际上并不存在于页面上。将jQuery放在页面上，或者切换到本机DOM方法。

3）如果你使用jQuery，你就不能互相切换它们。例如，我们假设你有两个盒子，上面有字母A和B.你想要切换它们。然后你说＆＃34;让A把B放在哪里，然后把B放在A是＆＃34;的地方。 A将移动到B所在的位置，但B将不会移动。你想在A 的地方做这件事。但是，您的代码告诉它替换实际替换另一个框的框，因此它不会按预期工作。为了解决这个问题，我们将它们存储在变量中，克隆它们，然后交换。

for ( var k in searches )
{
  var search = $(searches[k]);
  var target = $(targets[k]);
  var clonedSearch = search.clone(true); // clone col.#1
  var clonedTarget = target.clone(true); // clone col.#2

  search.replaceWith(clonedTarget); // reúůace col.#1 with col #2
  target.replaceWith(clonedSearch); // replace col. #2 with clone of #1
}

问题：上面的代码会使它工作，位置会在DOM中切换。但是，它们的实际定位是通过CSS控制的。实际上，即使您拥有的代码完美无缺，它们看起来仍然完全相同。如果你想要直观地改变他们的位置，你甚至不需要移动DOM。你可以这样做：

#navigace {
   position: absolute;
   top: 150px;
   left: 10px;
   width: 25%;
}
#text {
   margin: 150px 3% 0px 27vw
   width: 68.5%;
}

也许你只想在DOM中切换它并且你不关心它在视觉上的外观，但为了以防万一，我认为我已经覆盖了所有的基础。

Answer 2

解决。感谢Amleonard告诉我这个问题无法通过替换DOM对象来解决。我选择了CSS解决方案：

var selectors = "div#navigace;div#text"
selectors = selectors.split(";");    var searches = [];
var targets = [];
for ( var k in selectors )
      {
      if ( (k % 2) == 0 )
        searches.push(selectors[k]);
      else
        targets.push(selectors[k]);      
      }

for ( var k in searches )
   {
   var search = $(searches[k]);
   var target = $(targets[k]);
   var offset_search = search.offset();
   var offset_target = target.offset();
   search.css({
           'position' : 'absolute',
           'left' : offset_target.left + 'px',
           'top' : offset_target.top + 'px'
      });
   target.css({
           'position' : 'absolute',
           'left' : offset_search.left + 'px',
           'top' : offset_search.top + 'px'
      });
}

效果很好（至少在没有正确的属性时）。

为什么列交换器不起作用？

2 个答案: