时间戳

首页 > 解决方案 > 每次函数运行时，如何将文本从一个 div 移动到另一个？

jquery - 每次函数运行时，如何将文本从一个 div 移动到另一个？

问题描述

当每次函数运行时，我都试图将值从一个 div 移动到另一个。

下面是一个例子：myfunction()第一次运行时，它向 中添加新文本#current，然后在下一次myfunction()运行时，它从 复制值#current并将其提供给#5。传递到 后#5，#current获取新值，其他 div 继续传递直到#out。

我希望这是有道理的，并对糟糕的语法感到抱歉。

<div id="last_container">
    <div id="out" style="display: none;"></div>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    <div id="current" style="display: none;"></div>
</div>

// first-run    
myFucntion() {
$("#last_container").appendTo('#current').append("1");  //1
}
// second-run
myFucntion() {
$("#last5").html($("#current").html());  //<div id="last5">1</div>
}
// third-run
myFucntion() {
$("#last4").html($("#last5").html());  //<div id="last4">1</div>
}

这是 JSFiddle 链接： https ://jsfiddle.net/a26s5oxg/

任何帮助表示赞赏并提前感谢。

标签： jqueryfunction

解决方案

要执行您需要的操作，您可以在要定位的元素上放置一个类。如果该类在 DOM 中不可用，则您知道这是第一次单击，您需要设置text()in #current。如果该类确实存在，则需要转到上一个元素并在text()那里设置。请注意，在下面的示例中，第一次单击似乎没有执行任何操作，因为它正在处理#current隐藏的元素。

$('button').click(function() {
  var $target = $('div.active');
  
  if (!$target.length) {
    $('#current').text('1').addClass('active');
  } else {
    $target.removeClass('active').prev('div').addClass('active').text($target.text());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="last_container">
    <div id="out" style="display: none;"></div>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    <div id="current" style="display: none;"></div>
</div>

<button>Click me</button>

推荐阅读