Question

我正在使用Angular中的 Jquery 代码，我想将一个DIV元素移入另一个这是我的代码

.ts文件

moveButton(elem) {
  alert('hello' + elem);
  if ( $(elem).parent().attr('id') === 'oneDiv' ) {
    alert('hello' + elem);
    $(elem).detach().appendTo('#anotherDiv');

  } else {

    $(elem).detach().appendTo('#oneDiv');
  }
}

.html文件

<div id="oneDiv">   
  <button id="btnDefault" class='btn123' (click)='moveButton(this)' type='button'> Button 1  </button>
  <button id="btnPrimary" class='btn123' (click)='moveButton(this)' type='button' > Button 2 </button>
  <button id="btnDanger" class='btn123' (click)='moveButton(this)' type='button' > Button 3 </button>
</div> 
<div id="anotherDiv"> </div>

但是我的代码不起作用可能是因为detach（），parent（），attr（）不工作。

Answer 1

我不是角度专家，但是您在函数内的jquery代码对我来说很好用..您的问题可能在于函数与(click)='moveButton(this)'之间的关系

这是没有功能的jQuery 的工作方式

$(document).ready(function(){
  $(document).on('click' , '.btn123' , function(){
    var elem = $(this);
    if ( $(elem).parent().attr('id') === 'oneDiv' ) {
      $(elem).detach().appendTo('#anotherDiv');
    } else {
      $(elem).detach().appendTo('#oneDiv');
    }
  });
});

#oneDiv{
  background : red;
}
#anotherDiv{
  background : blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="oneDiv">   
  <button id="btnDefault" class='btn123' type='button'> Button 1  </button>
  <button id="btnPrimary" class='btn123' type='button' > Button 2 </button>
  <button id="btnDanger" class='btn123' type='button' > Button 3 </button>
</div> 
<div id="anotherDiv"> </div>

Answer 2

您不需要在同一级别上使用detach()和appendTo()，只需使用appendTo()函数即可。

我知道您想在AngularJS中执行此操作，但是您可以完全在jQuery中执行此操作，请检查以下代码：

function moveButton(elem) {

  if ( $(elem).parent().attr('id') == 'oneDiv' ) {
    $(elem).appendTo('#anotherDiv');
  } else {
    $(elem).appendTo('#oneDiv');
  }
}

#oneDiv{
border:solid 2px blue;
padding:20px
}


#anotherDiv{
border:solid 2px orange;
padding:20px;
margin-top:10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="oneDiv">   
  <button id="btnDefault" class='btn123' onclick='moveButton(this)' type='button'> Button 1  </button>
  <button id="btnPrimary" class='btn123' onclick='moveButton(this)' type='button' > Button 2 </button>
  <button id="btnDanger" class='btn123' onclick='moveButton(this)' type='button' > Button 3 </button>
</div> 
<div id="anotherDiv"> </div>

在Angular中将一个DIV元素移入另一个

2 个答案: