1

我正在使用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() 不起作用。

4

2 回答 2

0

我不是角度方面的专家，但你在函数中的 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>

于 2018-10-20T10:28:44.253 回答
0

您不需要在同一级别上使用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>

于 2018-10-20T10:31:18.930 回答