点击时交换两个项目答案

【问题标题】：Swap two items on clicks点击时交换两个项目
【发布时间】：2014-03-20 09:25:39
【问题描述】：

我想选择两个元素，当我单击按钮元素时，我希望它们交换位置，我该怎么做？我搜索并寻找了类似的答案，但其中大多数只是向上或向下交换元素。

我在想这样的事情：

$('button').click(function(){
   $('#item 1 .selected-item').removeClass('.selected-item').appendTo('#item2');
   $('#item 2 .selected-item').removeClass('selected-item').appendTo('#item1');
});

但我不知道如何开始，它应该看起来像这样：

http://jsfiddle.net/tLNAh/1/（我的小提琴）

【问题讨论】：

在你的小提琴中你想交换哪些项目？
你研究过 HTML5 可拖动吗？
我想切换我选择的两个 li 项目，即获得 .selected 类的项目，然后当我再次单击按钮时，它们交换位置。 #Jez D - 不，因为我只希望在 javascript 中使用它 :) 没有其他库，谢谢
你可以使用 Jquery UI Sortable - jqueryui.com/sortable
其实我更喜欢直接的 Javascript 版本，没有 jQuery，但由于我不是那么好，我不知道如何只在纯 Javascript 中做到这一点，这就是我在考虑的原因jQuery，因为我更容易理解发生了什么。

标签： javascript jquery html css swap

【解决方案1】：

试试这个。 http://jsfiddle.net/tLNAh/3/

$("button").on("click", function() {
    $first = $(".selected:eq(0)");
    $second = $(".selected:eq(1)");
    var tempText = $first.text();
    $first.text($second.text());
    $second.text(tempText);
    $("#instructionText").text("Instructions: choose an item");
});

【讨论】：

如果您需要实际交换元素而不是文本内容，则不需要（如果您的项目包含其他 html 元素，它将不起作用）。
我写这篇文章是为了给你一个想法。您必须根据您的要求更新代码

【解决方案2】：

使用您的标记执行以下操作：

$("button").on("click", function() {
    $('.selected').insertBefore($('ul:eq(1) li:first'));
});

Demo

或者你可以更新到这个：

$("button").on("click", function() {
   if($('.selected').closest('ul').index() < $('.selected').closest('ul').siblings('ul').index()){
      $('.selected').insertBefore($('ul:eq(1) li:first'));
   }else{
      $('.selected').insertBefore($('ul:eq(0) li:first'));
   }
});

Updated fiddle

【讨论】：

非常感谢。但是，如果我想这样做，那么我只能选择两个列表项，然后再次单击按钮进行交换？因为我必须保留弹出的文本，以方便不了解软件或应用程序的人使用。
唯一的问题是列表项不断跳入彼此的无序列表：/

【解决方案3】：

检查这个：fiddle link

为你的 ul 提供 id ：

<ul id="item1">
<ul id ="item2">

试试这个：

$("button").on("click", function() {
   $("#instructionText").text("Instructions: choose an item");    
   $('#item1 .selected').removeClass('selected').remove().appendTo('#item2');
   $('#item2 .selected').removeClass('selected').remove().appendTo('#item1');
});

$("body").on("click","li", function(e) {
   $(this).toggleClass("selected");        
   $("#instructionText").text("Instructions: choose the item to change place with");
});

【讨论】：

【解决方案4】：

您必须获取列表元素的索引并使用它： http://jsfiddle.net/faceleg/FJt9X/2/

var swapElements = function(siblings, subjectIndex, objectIndex) {
    // Get subject jQuery
    var subject = $(siblings.get(subjectIndex));
    // Get object element
    var object = siblings.get(objectIndex);
    // Insert subject after object
    subject.insertAfter(object);
}
$(function() {
    swapElements($('li'), 0, 1);
});

【讨论】：

【解决方案5】：

试试这个：

function swapItems(first, second) {
    var sibling = first.next();
    if (sibling.length) {
        first.insertBefore(second);
        second.insertBefore(sibling);
    } else {
        sibling = first.prev();
        if (sibling.length) {
            first.insertBefore(second);
            second.insertAfter(sibling);
        } else {
            var parent = firstItem.parent();
            first.insertBefore(second);
            second.appendTo(parent);
        }
    }
}

Updated fiddle

编辑：我更新了小提琴，现在你必须点击按钮来交换物品。

【讨论】：