Blogspot json - загружать контент поста по клику

Question

$.ajax({
    url: 'https://mailliw88.blogspot.com/feeds/posts/default?start-index=1&max-results=2&alt=json-in-script',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var entry = data.feed.entry;
        for (var i = 0; i < entry.length; i++) {

            postTitle = entry[i].title.$t;
            postTitleLink = entry[i].title.$t.replace(/\s+/g, '-').toLowerCase();

            items = '<div class="items"><h2><a href="#' + postTitleLink + '">' + postTitle + '</a></h2></div>';
            document.getElementById('showlists').innerHTML += items;

            postContent = entry[i].content.$t;

            content = '<div class="contentWrap"><div id="close">CLOSE</div><h1>' + postTitle + '</h1><div>' + postContent + '</div></div>';
            document.getElementById('showlists').innerHTML += content;
        }
    }
});

h1 {margin:0}
.contentWrap {border:1px solid red;
padding:5px}
#close {color:red;text-align:right}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='showlists'>
</div>

Как загружать содержимое сообщения только при нажатии на заголовок? Я могу использовать .toggle в jquery, но мне нужно загружать и «выгружать» контент, а не просто показывать и скрывать его. Надеюсь, я понимаю.

Мои навыки ограничены только css, спасибо за вашу помощь.

Answer 1

Вы можете использовать от display:none до <div class="contentWrap">, и, щелкнув тег a, вы можете показать контент, используя closest() и next(). И при щелчке close снова используйте "display", "none", чтобы скрыть это раздел содержимого

Код демонстрации :

$.ajax({
    url: 'https://mailliw88.blogspot.com/feeds/posts/default?start-index=1&max-results=2&alt=json-in-script',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var entry = data.feed.entry;
        for (var i = 0; i < entry.length; i++) {

            postTitle = entry[i].title.$t;
            postTitleLink = entry[i].title.$t.replace(/\s+/g, '-').toLowerCase();

            items = '<div class="items"><h2><a href="#' + postTitleLink + '">' + postTitle + '</a></h2></div>';
            document.getElementById('showlists').innerHTML += items;

            postContent = entry[i].content.$t;
//added display none and added class = close
            content = '<div style="display:none"class="contentWrap"><div class="close">CLOSE</div><h1>' + postTitle + '</h1><div>' + postContent + '</div></div>';
            document.getElementById('showlists').innerHTML += content;
        }
    }
});
//on click of a tag show content
$(document).on("click","a",function(){
//a->closest div->next content->show
$(this).closest(".items").next(".contentWrap").css("display", "block");


})
//onclick of close -> hide again
$(document).on("click",".close",function(){
$(this).closest(".contentWrap").css("display", "none");
})

h1 {margin:0}
.contentWrap {border:1px solid red;
padding:5px}
.close {color:red;text-align:right}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='showlists'>
</div>

Обновление 1 :

Вы можете присвоить i значение некоторого настраиваемого атрибута, а затем использовать то же самое index значение для доступа к содержимому сообщения. В приведенных ниже фрагментах кода я не отправлял снова запрос на сервер для загрузки json при щелчке a вместо этого я использовал некоторую переменную для хранения содержимого data.feed.entry в некоторой переменной, а затем используйте это для добавления содержимого.

Демо-код :

var datas = "";
$.ajax({
  url: 'https://mailliw88.blogspot.com/feeds/posts/default?start-index=1&max-results=2&alt=json-in-script',
  type: 'get',
  dataType: "jsonp",
  success: function(data) {
  //adding entry content in datas to use later
    datas = data.feed.entry;
    var entry = data.feed.entry;
    for (var i = 0; i < entry.length; i++) {

      postTitle = entry[i].title.$t;
     postTitleLink = entry[i].title.$t.replace(/\s+/g, '-').toLowerCase();
      //passing index no i.e : " i " in custom attribute 
      items = '<div class="items"><h2><a data-val=' + i + ' href="#' + postTitleLink + '">' + postTitle + '</a></h2></div>';
      document.getElementById('showlists').innerHTML += items;
       }
  }
});
$(document).on("click", "a", function() {
$(".contentWrap").remove(); //remove previous div
  var ids = $(this).attr('data-val');
  console.log(ids)
  //getting data that index position got from a tag
  postTitle = datas[ids].title.$t;
  postTitleLink = datas[ids].title.$t.replace(/\s+/g, '-').toLowerCase();
  postContent = datas[ids].content.$t;

  content = '<div class="contentWrap"><div class="close">CLOSE</div><h1>' + postTitle + '</h1><div>' + postContent + '</div></div>';
  document.getElementById('showlists').innerHTML += content;



})

h1 {margin:0}
.contentWrap {border:1px solid red;
padding:5px}
.close {color:red;text-align:right}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showlists"></div>