Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.4k views
in Technique[技术] by (71.8m points)

arrays - how to add dynamically multiple posts with jsonplaceholder

help me please, I display the html markup of 6 posts, the first click works correctly, the second click I display the same posts. how should I add six new posts, and so every time I click? I don't know what can be used instead of the slice method. demo 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('');

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Increase the startNum value startNum+=6. then in slice function do 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
          });
    
    });

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...