Question

我知道这很简单，但是我无法通过一些随机的原因让它工作，希望得到一些线索。

这是我的问题，

我需要在页面加载时附加html元素，当单击其他元素时，我需要根据类名更改附加元素的位置。

目前我可以在页面加载时附加div，但问题在于切换附加元素的位置。

这是我写的

$(".panel_blue").append($("<div class='red' />"));

$('.red').click(function () {
    $(this).hide();
    $('.panel_green').removeClass('panel_green').addClass('panel_blue');
    $(this).parent().removeClass('panel_blue').addClass('panel_green');
});

FIDDLE

Answer 1

这样的东西？单击时将红色框附加到蓝色类。

$('.red').on('click',function () {    
    $('.panel_green').removeClass('panel_green').addClass('panel_blue');
    $(this).parent().removeClass('panel_blue').addClass('panel_green');
    $(this).appendTo('.panel_blue');
});

DEMO

Answer 2

将$(this).hide();替换为$(this).detach().appendTo('.panel_green');。

Answer 3

您可以使用clone方法。所以你的完整代码将是

$('.red').click(function(){
    $('.panel_green').removeClass('panel_green').addClass('panel_blue');           
    $(this).parent().removeClass('panel_blue').addClass('panel_green');
    $(".panel_blue").append($(this).clone());
    $(this).remove(); 
});

JSFiddle

Answer 4

在此我改变div类后删除红色框。它按你的意愿工作。

$(".panel_blue").append($("<div class='red' />"));
 $(document).off("click", ".red").on("click", ".red", function (e) {  $('.panel_green').removeClass('panel_green').addClass('panel_blue');
    $(this).parent().removeClass('panel_blue').addClass('panel_green');
    $(this).remove();
    $(".panel_blue").append($("<div class='red' />"));
});

请参阅小提琴链接http://jsfiddle.net/3LZ2H/

切换附加元素

4 个答案: