Question

我设法写了这个JS代码，但我很确定我可以用更好的方式写下来，因为我使用了5种不同的功能，但它们非常相似，所以我想知道是否有更好的方法（与编写这些函数的代码较少：

HTML：

<div class="news-wrap margin-top-div">
  <div class="news-btn-container-flex">
    <div class="news-btn-div current" data-tab="1" onclick="req1()">1</div>
    <div class="news-btn-div" data-tab="2" onclick="req2()">2</div>
    <div class="news-btn-div" data-tab="3" onclick="req3()">3</div>
    <div class="news-btn-div" data-tab="4" onclick="req4()">4</div>
    <div class="news-btn-div" data-tab="5" onclick="req5()">5</div>       
  </div>

  <div class="news-content-container-flex">
    <div class="news-title">
      <span id="newsTitle">
      </span>
    </div>
    <div id="content-news">
    </div>
  </div>       

</div>

JS：

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = "";
      var i = 0;
      while (i <= 5) {
          body += json.body;
          i++;
      }
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("content-news").innerHTML = body;
    });
}
req1();

function req2() {
  fetch('https://jsonplaceholder.typicode.com/posts/2')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = "";
      var i = 0;
      while (i <= 5) {
          body += json.body;
          i++;
      }
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("content-news").innerHTML = body;
    });
}

function req3() {
  fetch('https://jsonplaceholder.typicode.com/posts/3')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = "";
      var i = 0;
      while (i <= 5) {
          body += json.body;
          i++;
      }
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("content-news").innerHTML = body;
    });
}

function req4() {
  fetch('https://jsonplaceholder.typicode.com/posts/4')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = "";
      var i = 0;
      while (i <= 5) {
          body += json.body;
          i++;
      }
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("content-news").innerHTML = body;
    });
}

function req5() {
  fetch('https://jsonplaceholder.typicode.com/posts/5')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = "";
      var i = 0;
      while (i <= 5) {
          body += json.body;
          i++;
      }
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("content-news").innerHTML = body;
    });
}

正如您所看到的，代码可能太多，重复次数太多，因此我希望在不使用ES6等新功能的情况下尽可能缩小，以避免旧浏览器出现问题。

有什么建议吗？

Answer 1

你可以通过传递一个参数来完成它，该参数将包含要在函数的url中追加的值，并在每个点击事件中使用该函数，如下所示

function req(id) {
  fetch('https://jsonplaceholder.typicode.com/posts/' + id)
    .then(function(res) {
      return res.json()
    })
    .then(function(json) {
      var title = json.title;
      var body = "";
      var i = 0;
      while (i <= 5) {
        body += json.body;
        i++;
      }
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("content-news").innerHTML = body;
    });
}
req(1);

<div class="news-wrap margin-top-div">
  <div class="news-btn-container-flex">
    <div class="news-btn-div current" data-tab="1" onclick="req(1)">1</div>
    <div class="news-btn-div" data-tab="2" onclick="req(2)">2</div>
    <div class="news-btn-div" data-tab="3" onclick="req(3)">3</div>
    <div class="news-btn-div" data-tab="4" onclick="req(4)">4</div>
    <div class="news-btn-div" data-tab="5" onclick="req(5)">5</div>
  </div>

  <div class="news-content-container-flex">
    <div class="news-title">
      <span id="newsTitle">
      </span>
    </div>
    <div id="content-news">
    </div>
  </div>

</div>

Answer 2

只需将ID作为函数参数传递

function req( id ) {
  fetch('https://jsonplaceholder.typicode.com/posts/' + id)
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = "";
      var i = 0;
      while (i <= 5) {
          body += json.body;
          i++;
      }
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("content-news").innerHTML = body;
    });
}

使用类似：

req( 5 );

合并更多类似的JS函数

2 个答案: