单击元素后附加到div，如果再次单击，则从该div中删除并将其返回到它来自的确切位置

Question

当单击元素时，将元素附加到指定的div，如果再次单击，则从该div中删除该元素，然后将其返回到它所来自的确切位置。我知道我当前的代码没有它所以我的jQuery是a）解决方法但更重要的是b）不起作用。我究竟做错了什么？感谢指导。

$('.choices').on('click', function() {
  var $this = $(this);
  if (($this.attr('id') == '#translateBoxCover')) {
    $this.remove().appendTo('#choicesWrapper');
  } else {
    $this.appendTo("#translateBoxCover");
  }
});

#translateBoxWrapper {
  position: relative;
  float: left;
  width: 100%;
  margin: 50px auto 0 auto;
  text-align: center;
}

#translateBox {
  width: 70%;
  height: 175px;
  border: 5px dashed white;
  text-align: center;
  margin: auto;
  vertical-align: middle;
  z-index: 0;
  overflow: hidden;
}

.translateBoxCover {
  position: relative;
  width: 99%;
  height: 99%;
  margin: 1% auto;
}

#choices {
  position: relative;
  float: left;
  width: 100%;
  margin: 50px auto 0 auto;
}

#choicesWrapper {
  width: 80%;
  margin: 0 auto;
}

.choices {
  position: relative;
  float: left;
  background: #FFFFFF;
  width: 100px;
  height: 50px;
  margin-left: 7px;
  margin-top: 5px;
  text-align: center;
  padding-top: 25px;
  box-shadow: 0 4px 8px 0 rgba(88, 88, 88, 0.50);
  border-radius: 2%;
  font-size: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='translateBoxWrapper'>
  <div id='translateBox'>
    <div id='translateBoxCover'> </div>
  </div>
</div>

<div id='choices'>
  <div id='choicesWrapper'>
    <div class='choices'>很</div>
    <div class='choices'>中国</div>
    <div class='choices'>美国</div>
    <div class='choices'>爱</div>
    <div class='choices'>喜欢</div>
    <div class='choices'>我</div>
    <div class='choices'>很</div>
    <div class='choices'>很</div>
    <div class='choices'>他</div>
    <div class='choices'>川普</div>
    <div class='choices'>厕所</div>
    <div class='choices'>想</div>
    <div class='choices'>你</div>
  </div>
</div>

Answer 1

您需要在移动元素之前保存索引。您可以使用.data()在元素中保存信息。

此外，ID不包含#字符，这只是它的选择器语法。

当您移动元素时，您不需要使用.remove()。元素只能位于DOM中的一个位置，因此将其附加到新位置会自动将其从旧位置删除。

$('.choices').on('click', function() {
  var $this = $(this);
  if ($this.parent().attr('id') == 'translateBoxCover') {
    var index = $this.data('index');
    if (index == 0) {
      $this.prependTo($("#choicesWrapper"));
    } else {
      $this.insertAfter($("#choicesWrapper .choices").eq(index-1));
    }
  } else {
    $this.data('index', $this.index());
    $this.appendTo("#translateBoxCover");
  }
});

#translateBoxWrapper {
  position: relative;
  float: left;
  width: 100%;
  margin: 50px auto 0 auto;
  text-align: center;
}

#translateBox {
  width: 70%;
  height: 175px;
  border: 5px dashed white;
  text-align: center;
  margin: auto;
  vertical-align: middle;
  z-index: 0;
  overflow: hidden;
}

.translateBoxCover {
  position: relative;
  width: 99%;
  height: 99%;
  margin: 1% auto;
}

#choices {
  position: relative;
  float: left;
  width: 100%;
  margin: 50px auto 0 auto;
}

#choicesWrapper {
  width: 80%;
  margin: 0 auto;
}

.choices {
  position: relative;
  float: left;
  background: #FFFFFF;
  width: 100px;
  height: 50px;
  margin-left: 7px;
  margin-top: 5px;
  text-align: center;
  padding-top: 25px;
  box-shadow: 0 4px 8px 0 rgba(88, 88, 88, 0.50);
  border-radius: 2%;
  font-size: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='translateBoxWrapper'>
  <div id='translateBox'>
    <div id='translateBoxCover'> </div>
  </div>
</div>

<div id='choices'>
  <div id='choicesWrapper'>
    <div class='choices'>很</div>
    <div class='choices'>中国</div>
    <div class='choices'>美国</div>
    <div class='choices'>爱</div>
    <div class='choices'>喜欢</div>
    <div class='choices'>我</div>
    <div class='choices'>很</div>
    <div class='choices'>很</div>
    <div class='choices'>他</div>
    <div class='choices'>川普</div>
    <div class='choices'>厕所</div>
    <div class='choices'>想</div>
    <div class='choices'>你</div>
  </div>
</div>