if语句条件问题javascript

Question

我有一个包含引号的对象。
我希望我的代码只打印 5 个引号，但是 if 语句被跳过（我认为），并且它一直打印引号直到它结束。我想知道问题出在哪里。
也许它在 if 语句或比较或条件或变量范围内。
我已经尝试了所有可能的方法来比较 i 和 r 但它根本不起作用。
我刚开始使用 js。感谢任何帮助。

let i = 0;
let r = 3; 

function printQuote() {
  
  item = data.notes[i];// data is my object having 15 quotes
  
  $('.quote-content').html(item.quote); 
  $('.quote-book').html(item.title);
  $('.quote-author').html(item.author);

  i+=1;
}

document.getElementById('next_button').innerHTML = 'Next Quote';

function getQuote() {
  var $button = $('.next');

  printQuote();
  
  if(parseInt(i,10)>parseInt(r,10)){
    window.alert('No more Quotes to show.');
    $button.disabled = True;
  }
  else{  
    $button.on('click', printQuote);
  }
}

$(document).ready(function() {
  getQuote();
});

列表项

Answer 1

问题是您的 getQuote 方法仅在文档准备就绪时调用一次。之后，单击按钮时仅调用 printQuote 方法，因为这是您附加的侦听器。因此，当您单击该按钮时，将设置报价数据并且 i 递增 1 - 仅此而已。我假设您希望将 i 和 r 比较逻辑移动到 printQuote 内部，或者在单击按钮时调用 getQuote 方法。

Answer 2

您的 if 语句不起作用，因为那些 i 和 r 变量未在您的 getQuote 函数中更新。

您可以改用这个：

let i = 0;
let r = 3;

let data = {
  notes: [
    {
      quote:
        '1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet illo voluptatum cupiditate asperiores quod a aperiam itaque nesciunt odio quam esse aliquid, ab praesentium sapiente mollitia. Fugit officia quidem odio blanditiis voluptatum aliquam error expedita modi commodi quod. Nobis est consequatur odit maiores possimus! Alias ullam quae facere fuga unde?',
        title: 'Lorem ipsum dolor sit amet.',
        author: 'Lorem, ipsum.'
    },
    {
      quote: '2) Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, omnis.',
      title: 'Lorem, ipsum dolor.',
      author: 'Lorem, ipsum.'
    },
    {
      quote: '3) Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
      title: 'Lorem ipsum dolor sit amet.',
      author: 'Lorem, ipsum.'
    },
    {
      quote: '4) Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, omnis.',
      title: 'Lorem, ipsum dolor.',
      author: 'Lorem, ipsum.'
    },
    {
      quote: '5) Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, omnis.',
      title: 'Lorem, ipsum dolor.',
      author: 'Lorem, ipsum.'
    },
  ],
};

function printQuote() {
  item = data.notes[i]; // data is my object having 15 quotes

  if (parseInt(i, 10) > parseInt(r, 10)) {
    window.alert('No more Quotes to show.');
    $('#next_button').prop('disabled', true);
  }

  $('.quote-content').html(item.quote);
  $('.quote-book').html(item.title);
  $('.quote-author').html(item.author);

  i += 1;
}

document.getElementById('next_button').innerHTML = 'Next Quote';

function getQuote() {
  var $button = $('#next_button');

  printQuote();
  $button.on('click', printQuote);
}

$(document).ready(function () {
  getQuote();
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quote Test</title>
  <script src="script.js" defer></script>
</head>
<body>
  <div>
    <div class="quote-content"></div>
    <div class="quote-book"></div>
    <div class="quote-author"></div>
  </div>
  <div>
    <button id="next_button"></button>
  </div>

  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
</body>
</html>

if语句条件问题javascript

If statement condition problem javascript

javascript

if-statement

conditional-statements

comparison-operators