Question

我创建了一段跨度，当点击时移动到另一个html元素，当点击时，在目标元素内返回到跨度部分。

我的问题是，如何将点击的跨度返回到跨度列表中的原始位置？

我可以想到一种可行的方法，并且会涉及使用CSS子选择器，但这可能变得非常复杂，我正在寻找一种更直观的方式。

现在发生了，有问题的范围会返回到列表的末尾。

<div id="genres">
   <?php
    $query = 'SELECT * FROM genres ORDER BY genre DESC';
    $genres = mysqli_query($db, $query);
    while($row = mysqli_fetch_assoc($genres)){
        echo "<span class='genre'>";
        echo ucfirst($row['genre']);
        echo "</span>";

以上简单地将数据输出到单独的跨度中，这些跨度被设计为类似于按钮的可点击元素。

单击某个跨度时，它会移动到空div中。

我的Jquery：

$("span.genre").click(function(){
    // remove the span and move it to the empty div
    $(this).remove().appendTo('div#genres_select');

    // remove span from the empty div and puts it back in the list
    $('div#genres_select span.genre').click(function(){
        $(this).remove().appendTo('div#genres');
});

有趣的是，我喜欢的是当点击的跨度移出列表时，所有其他元素都符合填充它的空间。

理想情况下，我正在寻找单击跨度的确切反向操作，就像您按下倒带按钮一样。

提前致谢

Answer 1

将位置添加到dom。

  $pos = 0
  while($row = mysqli_fetch_assoc($genres)){
    echo "<span orgPos='".$pos."' class='genre'>";
    echo ucfirst($row['genre']);
    echo "</span>";
    $pos++
  }

javascript寻找下邻居

   $('div#genres_select span.genre').click(function(){
    var pos = $(this).attr("orgPos");
    var neighbor = false;
    $('#genres span.genre').each(function(){
            if (!neighbor && ($( this ).attr("orgPos") < pos ))
                  neighbor = $( this );   
           })
    $(this).remove();
    sibling.after(this)
   }

如果它是列表中的第一个元素或只有一个元素，您需要弄清楚要做什么。

保留列表中移动元素的顺序

1 个答案: