Question

单击锚标记时，是否可以将.item从.region1移动到.region2，再次单击时可以将其移回.region1？那几乎是切换的行为？

  <a href="#" class="btn">Click</div>
  <div class="region1">
    <div class="item"></div>
  </div>
  <div class="region2"></div>

Answer 1

只需自己构建类似toggle的功能。检查元素是否存在，然后使用appendTo移动元素。

$('a.btn').click(function() {
  if ($('.region1 > .item').length) {
    $('.region1 > .item').appendTo('.region2');
  }
  else {
    $('.region2 > .item').appendTo('.region1');
  }
});

.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn">Click</a>
<div class="region1">
  <div class="item">item</div>
</div>
<div class="region2"></div>

如果整个页面中只有一个.item，您可以缩短它：

$('a.btn').click(function() {
  $('.item').appendTo($('.region1 > .item').length ? '.region2' : '.region1');
});

.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn">Click</a>
<div class="region1">
  <div class="item">item</div>
</div>
<div class="region2"></div>

或者没有jQuery：

document.querySelector('a.btn').addEventListener('click', function() {
  if (item = document.querySelector('.region1 > .item')) {
    document.querySelector('.region2').append(item);
  } else if (item = document.querySelector('.region2 > .item')) {
    document.querySelector('.region1').append(item);
  }
});

.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn">Click</a>
<div class="region1">
  <div class="item">item</div>
</div>
<div class="region2"></div>

Answer 2

利用append()来实现切换效果：

function toggleItem(){
  var $item = $('.region1').find('.item');
  if($item.length !== 0){
    $('.region2').append($item);
  } else {
    $item = $('.region2').find('.item');
    $('.region1').append($item);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn" onclick='toggleItem()'>Click</a>
<div class="region1">Inside region 1
  <div class="item">item</div>
</div>
<div class="region2">Inside region 2</div>

Answer 3

以下是vanilla JavaScript的解决方案：

＆＃13;

replaceRegex

＆＃13;

var item = document.querySelector('.item');
var region1 = document.querySelector('.region1');
var region2 = document.querySelector('.region2');

document.querySelector('a').addEventListener('click', function() {
  if (region1.contains(item)) {
    region2.appendChild(item);
  } else if (region2.contains(item)) {
    region1.appendChild(item);
  }
});

＆＃13;

.region1 {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

.region2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

＆＃13;

注意：

因为页面中可能只有一个<a href="#" class="btn">Click</a> <div class="region1"> <div class="item">Test</div> </div> <div class="region2"></div>标记，所以不应该像这样使用a。为了确保选择正确的...querySelector('a')...标记，您应该使其唯一，例如： G。通过添加一个id。如果您决定使用带有ID的方式，请将a替换为querySelector('a')。

谢谢致eisbehr帮助我以非常有效的方式减少脚本。

将附加元素切换到不同的div

3 个答案: