В основном застрял здесь и хотел бы помочь. Я пытаюсь перенести скрытое содержимое div определенной темы в отдельную область при нажатии на ее конкретный заголовок. В тот момент, когда я могу получить контент для переноса, но вместо содержимого конкретной темы он просто циклически просматривает контент при нажатии.

Извините за мой плохой титул, я изо всех сил пытаюсь определить мою точную проблему. Пожалуйста, измените, если вы чувствуете, что можете сделать лучше.

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

Нажатие на серые субтитры переносит содержимое.

Заранее спасибо.

JQuery:

$(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>
1
Ollie Jones 22 Янв 2013 в 15:25

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

скрипка здесь

2
bipen 22 Янв 2013 в 11:39

Я думаю, что вы слишком усложняете это;)

$(document).ready(function() {

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

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

 });
2
SWa 22 Янв 2013 в 11:41