如果WordPress帖子等于attr帖子ID，如何追加帖子？

Question

我想知道是否有人可以帮助我。我正在尝试在模式中显示博客文章（针对每个文章）。我创建了一个名为“ data-postid”的属性，我试图获取它，以便如果有人单击“了解更多”，它会显示模式并按帖子ID加载标题和内容。有人可以帮我解决这个问题吗？谢谢！

var urlstring = 'https://qualityshop24-7.com/review/saharworld/blog/wp-json/wp/v2/posts/';
jQuery.ajax({
  type: 'GET',
  url: urlstring + '?per_page=50',
  dataType: 'json',
  success: function(data) {
    jQuery.each(data, function(index, value) {
      console.log(value.title);
      console.log(value.content);
      var valueString = JSON.stringify(value);
      var newURLDir = urlstring + value.id + '?_embed';
      console.log(newURLDir);
      var GetImgData = jQuery.ajax({type:'GET', url:newURLDir, dataType:'json'});
      var imgDataURLSource = JSON.stringify(GetImgData);

      jQuery('#wordpress-posts').append(
        '<div class="col-md-4 col-xs-6 team-member"><div class="team-content show-team-details">'
         + '<div class="img-cont"><img src="' + value.better_featured_image.source_url
         + '" class="img-responsive"></div>'  
         + '<div class="blog-box"><div class="max-height-blog"><h5>'
         + value.title.rendered
         + '</h5>'
         + '<div class="exceprt">' 
         + value.content.rendered.substr(0, 140) 
         + '...' + '</div></div>' 
         + '<a class="minimal-btn green-btn view-link blogbtn" href="#myModal" data-toggle="modal" data-postid="'+value.id+'" data-target="#myModal"> Learn More <i class="fas fa-angle-double-right"></i> </a>' 
         + '</div></div>');
       
    jQuery(document).ready(function(){
    jQuery.ajaxSetup({cache:false});
    jQuery(".trick").click(function(){
        var post_id = jQuery(this).attr("data-post");
        if (post_id == value.id) {
          console.log('Testing');
          //jQuery Append post_id title & content to #post_load_1. 
        } 
        jQuery("#post_load_1").html("loading...");
        jQuery("#post_load_1").load(GetImgData);
    return false;
    });

});

    }
    );

    var divs = jQuery("div > div.team-member");
      for(var i = 0; i < divs.length; i+=3) {
        divs.slice(i, i+3).wrapAll("<div class='item'><div class='row gutter-sm'></div></div>");
    };
    jQuery('#wordpress-posts .item').eq(0).addClass('active').end()
    jQuery('#wordpress-posts-inner .item').eq(0).addClass('active').end()
  },
  error: function(error) {
    console.log(error);
  }
});

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="section spacing-default tersus-block-team-5" id="blog">
    								<div class="parallax background div-bg-03" data-stellar-background-ratio="0.5"></div>
    			<div class="bind-narrow bind-narrow-md">
    					<div class="container">
    					<div class="row"><h2>INNOVATIVE IDEAS FROM SAHAR’S BLOG</h2></div>
    				</div>
    				<div class="container">
    					<div class="row">
    						<div class="col-md-12">
    							<div class=" team-wrpr">
    								<div id="team-carousel-1" class="carousel carousel-fade pull-right slide" data-ride="carousel">
    									<!-- Wrapper for slides -->
    									<div class="carousel-inner" role="listbox" id="wordpress-posts">
    									</div>						
    								</div>
    					<div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                    <div class="modal-header">
                    <div id="modalLoader" style="display: none;text-align: center;font-size: 15px;color: rgb(114, 190, 68);margin: auto !important;float: left;"><i class="fas fa-spinner-third fa-spin"></i> <span style="color:#5d5d5d;margin: auto;text-align: center;display: inline-block;"> Loading...</span></div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                   <div class="it" id="post_load_1"></div>
                </div>
            </div>
        </div>
    </div>
    							</div>
    						</div>
    					</div>
    					<div class="row">
    						<div class="col-md-12">
    							<div class=" team-wrpr">					
    								<div class="owl-control">
    									<a class="left carousel-control" href="#team-carousel-1" role="button" data-slide="prev">
    										 <i class="arrow-prev"></i>
    										<span class="sr-only">Previous</span>
    									</a>
    									<p> <strong>Scroll Blogs</strong></p>
    									<a class="right carousel-control" href="#team-carousel-1" role="button" data-slide="next">
    										 <i class="arrow-next"></i>
    										<span class="sr-only">Next</span>
    									</a>
    									</div>
    								</div>
    							</div>
    						</div>
    				</div>
    			</div>
    		</div>