将 div 移动到另一个 div (ASP.NET MVC)答案

【问题标题】：Move div to another div (ASP.NET MVC)将 div 移动到另一个 div (ASP.NET MVC)
【发布时间】：2017-02-27 22:46:22
【问题描述】：

我正在编写 ASP.NET 应用程序

我有一个 div，这里是代码：

<div class="title" style="margin-top:15px;margin-left:15px;">
    <img class="click" src="@Url.Content(" ~/Images/plus_plus.png")" />
    <span>
        @Html.TextBoxFor(modelItem => item.question, new {@class="testclass", @readonly = "readonly" })
    </span>

    <a class="click2" style="margin-left:10px;">
        <img src='@Url.Content("~/Images/arrow.png")' />
    </a>
    <a style="margin-left:25px;" href='@Url.Action("Edit", "Questions", new {id = item.QuestionId})'>
        <img src='@Url.Content("~/Images/Edit.png")' />
    </a>
    <a href='@Url.Action("Delete", "Questions", new {id = item.QuestionId})'>
        <img src='@Url.Content("~/Images/Delete.png")' />
    </a>
</div>

我需要把它移到另一个。这是代码：

 <div class="title2"></div>

据我了解，需要通过 jquery 来完成。

我试着写这个脚本

 <script type="text/javascript" >
    $('.title').on('click', function () {
        $(this).next().toggle();
    });
    $('click2').click(function () {
        var elem = $(this).closest('.title');
        elem.hide();
        $('title2').append(elem).show();
        elem.remove();
    });
</script>

但它不起作用。我的问题在哪里？

【问题讨论】：

$('title2').append(elem).show(); 上面的所有内容都工作了吗？还是只是那条线？
不，elem 没有隐藏@BviLLe_Kid
您在$('click2') 和$('title2') 中缺少.，它必须是$('.click2')
好的，现在块被隐藏了，但没有显示在另一个 div@CarstenLøvboAndersen
可能是这一行正在从你的 DOM 中删除标题 div：elem.remove();

标签： c# jquery html asp.net asp.net-mvc

【解决方案1】：

删除.hide 并将elem 的html 附加到title2

var elem = $(this).closest('.title');
$('.title2').append($(elem).html()).show();
$('.title').remove()

我添加了一些 <hr> 并删除了一些 mvc 代码，以使示例正常工作。它不会给您带来任何问题。

$('.title').on('click', function() {
  $(this).next().toggle();
});
$('.click2').click(function() {
  var elem = $(this).closest('.title');
  $('.title2').append($(elem).html()).show();
  $('.title').remove()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title" style="margin-top:15px;margin-left:15px;">
  <img class="click" src="@Url.Content(" ~/Images/plus_plus.png ")"  />
  <span>
</span>

  <a class="click2" style="margin-left:10px;">
    <img src='@Url.Content("~/Images/arrow.png")' />
  </a>

</div>
<hr>
<hr>
<div class="title2"></div>

【讨论】：

非常感谢。它有帮助

【解决方案2】：

乍一看，您在尝试将事件侦听器分配给具有特定类名的特定元素时忘记包含.。

例如：

<script type="text/javascript" >
    $('.title').on('click', function () {
        $(this).next().toggle();
    });
    $('click2').click(function () {
        var elem = $(this).closest('.title');
        elem.hide();
        $('title2').append(elem).show();
        elem.remove();
    });
</script>

需要：

<script type="text/javascript" >
    $('.title').on('click', function () {
        $(this).next().toggle();
    });
    $('.click2').click(function () {
        var elem = $(this).closest('.title');
        elem.hide();
        $('.title2').append(elem).show();
        elem.remove();
    });
</script>

另外，我已将.hide() 和.show() 更改为.detach() 和.attach()。

我创建了一个JSfiddle。

这不完全是你所拥有的，而只是为了视觉。

HTML：

<div class="title">
    <p>
      This is a test
    </p>

    <button class="click2">
        Click Me
    </button>
</div>

<div class="title2">
    <p>
        This is test #2
    </p>
</div>

jQuery：

$('.title').on('click', function () {
    $(this).next().toggle();
});
$('.click2').click(function () {
    var elem = $(this).closest('.title');
    elem.detach();
    $('.title2').append(elem).attach();
    elem.detach();
});

如果这有帮助，请告诉我。

【讨论】：

谢谢它也有帮助。