if语句条件问题javascript答案

【问题标题】：If statement condition problem javascriptif语句条件问题javascript
【发布时间】：2021-03-03 18:17:57
【问题描述】：

我有一个包含引号的对象。
我希望我的代码只打印 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();
});

列表项

【问题讨论】：

你的 'i' 和 'r' 变量是数字。为什么要使用 parseInt()？
我认为解析整数有问题，但现在我知道问题所在了。请参阅以下答案。现在我删除了 parseInt()。

标签： javascript if-statement conditional-statements comparison-operators

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

谢谢你为我工作，但是这两个变量是全局的，为什么他们没有在 getQuote() 中更新？
因为当 DOM 加载时，你的 getQuote 函数只调用了一次。但是，只要单击按钮，就会调用您的 printQuote。因此，当 DOM 加载脚本时，您的条件语句第一次起作用。您必须在 printQuote 函数中移动您的条件，以便在单击按钮时运行您的条件。