jquery - 切换附加元素

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