1

主要被困在这里，希望得到一些帮助。当单击特定标题时，我正在尝试将特定主题的隐藏 div 内容迁移到单独的区域。此刻，我可以迁移内容，但不是特定主题内容，而是在单击时循环浏览内容。

对不起我可怜的标题，我正在努力定义我的确切问题。如果你觉得你可以做得更好，请改变。

http://jsfiddle.net/vBCs5/1/

单击灰色字幕可迁移内容。

先感谢您。

查询：

$(document).ready(function() {

   $(".freemarker-wrap div").hide();

   $(".test").click(function () {

      $(".freemarker").each(function () {

        var working = $(this).contents();
        var ref = $(".content-box").contents();

        $(this).append(ref);
        $(".content-box").append(working);

   });
  });
});

HTML

<html>
<body>

<div class="page-wrap">
<div class="left-column-wrap">

<h1>FreeMarker +</h1>
<div class="freemarker-wrap">
    <span class="test">
        <h2>Lucene Call ></h2>
        <div class="freemarker">
        <p>Click to hide stories</p>
    </div>
</span>

<span class="test">
    <h2>Arrays ></h2>
    <div class="freemarker">
        <p>Arrays</p> 
    </div>
</span>

<span class="test">
<h2>Declaring and outputting variables ></h2>
    <div class="freemarker">
        <p>Declaring</p> 
    </div>
</span>

<span class="test">
    <h2>IF Statements ></h2>
    <div class="freemarker">
        <p>Statements</p>  
    </div>
</span>

<span class="test">
    <h2>Fragments ></h2>
    <div class="freemarker">
        <p>Fragments</p>
    </div>
</span>

<span class="test">
    <h2>Working with Numbers ></h2>
    <div class="freemarker">
        <h3>Numbers</h3>        
    </div>
</span>

<span class="test">
     <h2>Current Date ></h2>
     <div class="freemarker">     
        <p>Current</p>
     </div>
     </span>
 </div>

 <div class="javascript-wrap">
<h1>JavaScript +</h1>
 </div>

 <div class="javascript-wrap">
<h1>JQuery +</h1>
 </div>

 <div class="javascript-wrap">
<h1>HTML +</h1>
 </div>

 <div class="javascript-wrap">
<h1>CSS +</h1>
 </div>

 </div>

 <div class="content-box">
 </div>

</div>

</body>
</html>
4

2 回答 2

2

假设这是您的要求...

$(document).ready(function() {

  $(".freemarker-wrap div").hide();
  $(".test").click(function () {
    var working=$(this).find(".freemarker").html(); // get that particular <span> html
    $(".content-box").html(working); <migrate it to content
 });
});

在这里摆弄

于 2013-01-22T11:39:15.180 回答
2

我认为你把它复杂化了；）

$(document).ready(function() {

  $(".freemarker-wrap div").hide();

  $("span.test").click(function () {
      $(".content-box").html( $(this).find("div.freemarker").html() );
    });

 });
于 2013-01-22T11:41:16.880 回答