如何使用 jsonplaceholder 动态添加多个帖子

Question

请帮助我，我显示了 6 个帖子的 html 标记，第一次点击正常，第二次点击我显示相同的帖子。我应该如何添加六个新帖子，所以每次我点击？我不知道可以使用什么来代替 slice 方法。演示 https://jsfiddle.net/u9zc7p5v/13/

  const content = mrd.map(function(data, elem) {    
  return `
    <div class="blog__item">
      <h2 class="blog__item-title">
        ${data.title}
      </h2>
      <input type="checkbox" class="read-more-state" id="post-${elem}" />
      <p class="blog__item-text">
        ${data.body} <span class="blog__item-more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque ducimus unde harum vitae quam provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente odit laborum tempore sed quaerat a aliquam? Corrupti dolorum, tempora iste qui modi consectetur explicabo quia vel reiciendis nesciunt? Id!</span>
      </p>
      <label for="post-${elem}" class="blog__item-toggle" >Read More</label>
      <div>${elem}</div>
    </div>
  `
  }).slice(startNum, endNum).join('');

Answer 1

增加startNum值startNum+=6。然后在 slice 函数中执行 startNum + endNum.

$(function(){
          const blogs = document.querySelector('.blog__items')
          const moreBtn = document.querySelector('.blog-btn')
          let startNum = 0;
          let endNum = 6;
          async function getContent() {
            
            let responce = await fetch('https://jsonplaceholder.typicode.com/posts');
            let data = await responce.json();
            return data;
        
          }
        
          $(moreBtn).on('click', async function(e) {
            let mrd = await getContent();
                console.log(mrd.length)
            const content = mrd.map(function(data, elem) {  
              return `
                <div class="blog__item">
                  <h2 class="blog__item-title">
                    ${data.title}
                  </h2>
               
                  <p class="blog__item-text">
                    ${data.body} <span class="blog__item-more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque ducimus unde harum vitae quam provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente odit laborum tempore sed quaerat a aliquam? Corrupti dolorum, tempora iste qui modi consectetur explicabo quia vel reiciendis nesciunt? Id!</span>
                  </p>
                  <label class="blog__item-toggle" >Read More</label>
                  <div>${elem}</div>
                </div>
              `
              }).slice(startNum, startNum+endNum).join('');
                    console.log(startNum)
            const el = $(content);
            $(blogs).append(el)
            el.on('click', function() {
        
            });
           startNum+= 6
          });
    
    });

如何使用 jsonplaceholder 动态添加多个帖子

how to add dynamically multiple posts with jsonplaceholder

arrays

async-await

jsonplaceholder