无法在不依赖于另一个标签的情况下显示 JavaScript / jQuery div 标签

Question

当页面上有 <div id="medium-feed"... 时，我使用 JavaScript 和 jQuery 来显示我的 RSS Medium feed。

当提取JSON数据时，我使用HTML显示数据，一些CSS，bootstrap库使用day.js（以格式化日期）。到目前为止，它按预期工作（请参阅底部的代码片段）。

我还想在我的页脚显示一个更紧凑的提要版本，显示标题和发布日期。所以我复制了我的原始代码并让 JavaScript 寻找一个 <div id="medium-feed-footer"... 来显示提要的另一个版本所以它看起来像这样：

这只有在我在同一页上显示我的两个 div 元素时才有效，like my blog page:

<div id="medium-feed" username="factmaven" read-more="Read More"></div>
<div id="medium-feed-feed" username="factmaven"></div>

但是如果我访问任何其他只显示我的提要页脚版本的页面，它是空的，as seen on my homepage。当您测试我的代码片段时，只需在 ID 中单独添加 -footer 部分，它就不会显示。似乎需要同时显示 div 标签才能正常工作。

如何让我的页脚版本独立显示？我尝试了各种方法，例如将此代码分成两个单独的文件并尝试使用 if/then 语句，但结果始终相同。

$(document).ready(function() {
  // Get option values
  var divID = 'medium-feed';
  var mediumUsername = document.getElementById(divID).getAttribute('username');
  var readMore = document.getElementById(divID).getAttribute('read-more');

  /* Medium Feed */
  document.getElementById(divID).innerHTML =
    ($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
      function(json) {
        $('#' + divID).html('');
        // For loop each Medium post in HTML structure
        for (var i in json.items) {
          // Define custom value with regex and replace
          var thumbnail = json.items[i].thumbnail.replace(/max\/(.+?)\//g.exec(json.items[i].thumbnail)[1], $('#' + divID).width());
          var subtitle = /<p class="medium-feed-snippet">(.+?)<\/p>/g.exec(json.items[i].description)[1];
          var pubDate = dayjs(json.items[i].pubDate).format('MMM D, YYYY');
          var categories = json.items[i].categories.join(', #');
          // HTML post structure
          $('#' + divID).append(
            '<div class="blog-post col-lg-4 col-md-6 col-sm-12">' +
            '<div class="blog-post-date">' + pubDate + '</div>' +
            '<a href="' + json.items[i].link + '" target="_blank" class="blog-post-image" style="background-image: url(&quot;' + thumbnail + '&quot;);"></a>' +
            '<a href="' + json.items[i].link + '" target="_blank" ' + 'title="' + json.items[i].title + '">' +
            '<h3>' + json.items[i].title + '</h3>' +
            '</a>' +
            '<small>by ' + json.items[i].author + '</small>' +
            '<hr>' +
            '<p>' + subtitle + '.</p>' +
            '<small>#' + categories + '</small>' +
            '<p><a href="' + json.items[i].link + '" target="_blank">' + readMore + ' <i class="fas fa-long-arrow-alt-right"></i></a></p>' +
            '</div>'
          );
        }
      }));

  /* Footer Medium Feed */
  document.getElementById(divID + '-footer').innerHTML =
    ($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
      function(json) {
        $('#' + divID + '-footer').html('');
        // For loop each Medium post in HTML structure
        for (var i in json.items.slice(0, 5)) {
          var pubDate = dayjs(json.items[i].pubDate).format('MMM D, YYYY');
          // HTML post structure
          $('#' + divID + '-footer').append(
            '<a href="' + json.items[i].link + '" target="_blank" ' + 'title="' + json.items[i].title + '">' +
            '<h4>' + pubDate + '</h4>' +
            '<h5>' + json.items[i].title + '</h5>' +
            '</a>'
          );
        }
      }));
});

.blog-post-image {
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  overflow: auto;
  display: block;
}

.blog-post-image:after {
  content: "";
  display: block;
  position: relative;
  margin-top: 60%;
  width: 100%;
  z-index: 1;
}

.blog-post-date {
  position: absolute;
  background-color: #ffffff;
  padding: 5px;
  color: #000000;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.6/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-offset-1 col-md-10 col-sm-12">
      <div class="section-title">
        <h3>Latest Blog Posts</h3>
      </div>
      <div id="medium-feed" username="factmaven" read-more="Read More"></div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

Answer 1

在其他页面上，Javascript 没有找到包含 id = "medium-feed" 的元素，因此 returns 出错。首先，检查元素是否存在。

$(document).ready(function() {
  // Get option values
  var divID = 'medium-feed';
  var mediumUsername = document.getElementById(divID).getAttribute('username');
  var readMore = document.getElementById(divID).getAttribute('read-more');

 /* Medium Feed */
  var divContainer = document.getElementById(divID);

if (divContainer) {//check if element exists

  divContainer.innerHTML = ($.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/' + mediumUsername,
    function(json) {

      //rest of your code

    }))
}

})

无法在不依赖于另一个标签的情况下显示 JavaScript / jQuery div 标签

Unable to display JavaScript / jQuery div tag without dependency on another tag

javascript

html

jquery

feed