在点击时交换两个项目

Swap two items on clicks

本文关键字：两个 项目 交换      更新时间：2023-09-26

我想选择两个元素，当我单击button元素时，我想让它们交换位置，我该怎么做呢?我已经搜索并寻找了类似的答案，但其中大多数只是上下交换元素。

我想这样写:

$('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/(我的小提琴)

试试这个。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");
});

在你的标记中这样做:

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

或者你可以这样更新:

$("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'));
   }
});

更新小提琴

查看此链接

为您的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");
});

你必须得到列表元素的索引，并使用这个: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);
});

试试这个:

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);
        }
    }
}

更新小提琴

编辑:我更新了小提琴，现在你必须点击按钮来交换项目。

相关文章：