2017-02-08 4 views
0

Привет Я ищу, чтобы разместить содержимое из дочернего элемента в другой элемент.Поместить содержимое из щелкнутого элемента в другой элемент

У меня есть скрытый div, называемый «DetailsExpanded» и серия предметов, называемых «IconWrapper». При нажатии «IconWrapper» я хотел бы скопировать содержимое из этих элементов «ItemDetail» в «DetailsExpanded» и спуститься вниз «DetailsExpanded» с указанным контентом

См. Ниже мою структуру html.

Я начал с раздвижных js, но, к сожалению, я немного из глубины.

$(".IconWrapper").click(function() { 
 
    if ($(".DetailsExpanded").is(":hidden")) { 
 
    $(".DetailsExpanded").slideDown("fast"); 
 
    } else { 
 
    $(".DetailsExpanded").hide(); 
 
    } 
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="DetailsExpanded"></div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div>

+1

JQuery в '.html ("селектор")' функция получает содержимое первого элемента в наборе соответствующих элементов http://api.jquery.com/html/ – elementzero23

ответ

1

Все, что вам нужно сделать, это взять .html() из щелкнули элемента и установить его в .DetailsExpanded элемент:

$(".IconWrapper").on("click", function() { 
    var content = $(this).find(".ItemDetail").html(); 
    $(".DetailsExpanded").html(content); 
    $(".DetailsExpanded").slideToggle("fast"); // this replaces slideDown or hide 
}); 
+0

Привет Спасибо за помощь! Его почти там =], что работает до сих пор, я нажимаю первый «IconWrapper», и он скользит вниз с правильным содержимым внутри. Затем, когда я перехожу к другому значку «IconWrapper», он меняет содержимое и перескакивает. Я добавил следующую строку: '$ (". DetailsExpanded "). SlideDown (" fast ");' и скользящая работа правильно, но содержимое, загружаемое до начала перехода слайдов, как я могу загрузить загрузку содержимого, когда слайд закрыто? – Salmon

+0

Удалось заставить его работать. Спасибо, что вел меня по правильному пути. Вот что я сделал '$ (". IconWrapper "). Click (function() { \t var content = $ (this) .find (". ItemDetail "). Html(); if ($ (". ДеталиОткрытые ") .а (': скрытый')) { \t \t \t $ (" DetailsExpanded ") HTML (содержание); \t \t \t $ (". DetailsExpanded ") slideDown (." быстрый "); \t.. \t \t} еще если. ($ ("DetailsExpanded. ") есть (. ': видимый')) { \t \t \t $ (". DetailsExpanded ") slideUp (" быстрый", функция() { \t \t \t \t $ (". Подробно Expanded"). Html (content); \t \t \t \t $ (". Подробно Expanded"). SlideDown ("fast"); \t \t \t}); \t \t \t} }); ' – Salmon

0

$(".IconWrapper").click(function() { 
 
    var text = $(this).find('.ItemDetail').text(); 
 
    $(".DetailsExpanded").html(text).slideDown("slow"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="DetailsExpanded"></div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy1</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy2</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div> 
 

 
     <div class="IconWrapper"> 
 
      <div class="ItemDetail">Content to copy3</div> 
 
      <div class="Icon icon-icons-d-steps"></div> 
 
     </div>

Вы хотите что-то ищите?

0

$(document).ready(function(){ 
 

 
    $('.IconWrapper').on('click', function(e) { 
 
     $(".DetailsExpanded").text($(this).text()).slideDown(); 
 
    }); 
 
});

Смежные вопросы