2

Задача при клике на разные блоки с классом "media" копировать их содержимое в блок c классом "tt", чтоб они появлялись один под другим.

Сейчас это не работает, т.к. на какой бы блок ("media") не нажимал, все копируется с первого.

//выбираем нужные элементы
var a = document.querySelectorAll('.media');

//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
        $('#clicker').clone(true).unwrap().appendTo('.tt');
    }
});
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">54,120</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">12,650</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">32,390</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">76,770</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>

<div class="tt">

</div>

2 ответа 2

2

$('.media').click(function(e) {
  $('.tt').append(this.outerHTML);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">54,120</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">12,650</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">32,390</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">76,770</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>

<div class="tt">

</div>

4
  • Спасибо, все оказалось намного проще и меньше кода!!!
    – 4isto
    30 июн 2021 в 18:32
  • А нет, при таком копировании и новые блоки которые копируются при нажатии делают еще одну копию
    – 4isto
    30 июн 2021 в 18:49
  • Верно, мне надо чтоб копировалось содержание блока, а не сам блок.
    – 4isto
    30 июн 2021 в 19:02
  • @4isto в таком случае измени this.outerHTML на this.innerHTML
    – twerk kid
    1 июл 2021 в 4:54
0

//выбираем нужные элементы
var a = document.querySelectorAll('.media');

//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
        $(this).clone(true).unwrap().appendTo('.tt');
    }
});
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">54,120</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">12,650</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">32,390</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">76,770</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>

<div class="tt">

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.