jquery移动并显示另一个字段的内容

Question

这是我正在做的。我希望我的脚本将内容（它确实）放在另一个div的下面（也是这样做）。段落全部隐藏，直到您点击其中一个列表项，然后在div中显示其段落，称为info。这是我的脚本。

$(document).ready(function() { 
    var desc = $('.m-desc'); 
    var info = $(".desc li"); 
    var type = $('.type p'); 
    var part = $('.parts p'); 
    var paper = $('.paper p'); 
    var size = $('.size p'); 
    var imp = $('.imp-area p'); 
    $(".formFilling-preview").append(desc); 
    $(type).hide(); 
    $('.parts').click(function() { 
     $(".info").append(type); 
     $(this).children().hide('slow'); 
    }); 
    $('.imp-area').click(function() { 
     $(".info").append(imp); 
    }); 
    $('.paper').click(function() { 
     $(".info").append(paper); 
    }); 
    $('.size').click(function() { 
     $(".info").append(size); 
    }); 
    $('.type').click(function() { 
     $(".info").append(type); 
     $(type).show(); 
    }); 
}); 

<div class="m-desc"> 
    <ul class="desc"> 
     <li class="type selected">Type:</li> 
     <li class="parts">Parts: <p></p></li> 
     <li class="paper">Paper Type: <p></p></li> 
     <li class="size">Size: <p></p></li> 
     <li class="imp-area">Imprint Area: <p></p></li> 
    </ul> 
    <div class="info"> 
     <p style="display: none;">Lorem lipsum epsum</p></div> 
    </div> 

这里是一个的jsfiddle我设置http://jsfiddle.net/cornelas/4mzgV/

Answer 1

试试这个：

$(document).ready(function() { 
    var desc = $('.m-desc'); 
    var descLi = $('.m-desc .desc li'); 
    var info = $('.info'); 

    $(".formFillingPreview").append(desc); 
    descLi.click(function() { 
     info.html($('p', $(this)).html()); 
     $('p', info).show(); 
    }); 
}); 

检查出来整个例如：

http://jsfiddle.net/4mzgV/28/