Блог

Главная - Вопросы по программированию - как клонировать контент и изменять его в javascript

как клонировать контент и изменять его в javascript

#javascript #html #jquery #settimeout #clone

Вопрос:

я хочу показывать по одному новому номеру, раскрывающемуся каждый день с *96 по *01 с помощью клона 96, и вставлять его на следующий день вот так

 <!-- HTML -->
<div class="content">
  <a class="days day-96" style="display:none;">
    *96
  </a>
  <a class="days day-95" style="display:none;">
    *95
  </a>
</div>
 
 // JS
$(document).ready(function(){
    // Delay the action by 10000ms
    setTimeout(function(){
       $(".day-96").show();
    }, 0000);
    setTimeout(function(){
        $(".day-95").show();
     }, 5000);

 });

Комментарии:

1. что ты пытаешься сделать

Ответ №1:

существует способ клонирования элементов в jquery, также аналогичный в vanilla js

.cloneNode(true) для ванильного js

 // JS
$(document).ready(function(){
    var el = $(".days").clone(),
        count = 100
    $(".content").text("")
    while(count){
        var newEl = el.clone()
        newEl.html(count)
        $(".content").append(newEl)
        count--
    }
    animate(100)  // define delay in ms
 });
 
 function animate(delay){
    var i = 0,loop,days=$(".days")
    loop = setInterval(function(){
        if(i < days.length){days.eq(i).addClass("show")}
        else{clearInterval(loop)}
        i  
    },delay)
 } 
 .days {opacity:0;transition:all 0.2s ease;}
.show {opacity:1;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css" integrity="sha512-5D0ofs3AsWoKsspH9kCWlY7qGxnHvdN/Yz2rTNwD9L271Mno85s 5ERo03qk9SUNtdgOZ4A9t8kRDexkvnWByA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="content flex flex-wrap">
  <a class="days border p-2" style="display:block;"></a>
</div>

Комментарии:

1. спасибо, как отложить действие на один день

2. я не могу понять, что вы хотели отложить, если вы можете показать еще один пример желаемого результата, я могу что-то предложить, и если этот ответ решит вашу проблему, рассмотрите возможность его принятия, пожалуйста

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

Метки: