如何使用 IF 函数停止 JavaScript 中的所有函数

Question

我正在尝试使用一个函数和许多 IF 函数来运行此代码。

我打算把它做成一个笔记应用程序。

我想添加一个 IF 函数，它有一个名为 stop-note 的类。

我想将它添加到注释列表中作为它的 IF 函数，然后我想将它添加到“renderNotes”中，因为它的链接风格。

notesList.on('click', function (e) {

  e.preventDefault();

  var target = $(e.target);

  var abort = false;

  // Listen to the selected note.

  if (target.hasClass('listen-note')) {

    if (abort) {

      return;

    }

    var content = target.closest('.note').find('.content').text();

    readOutLoud(content);

  }

  //Edit Note

  if (target.hasClass('edit-note')) {

    editText(content);

    var dateTime = target.siblings('.date').text();

    deleteNote(dateTime);

    target.closest('.note').remove();

    var content = target.closest('.note').find('.content').text();

  }

  // Delete note.

  if (target.hasClass('delete-note')) {

    var dateTime = target.siblings('.date').text();

    deleteNote(dateTime);

    target.closest('.note').remove();

  }

});

这是我在上面运行我的函数的函数。

function renderNotes(notes) {

  var html = '';

  if (notes.length) {

    notes.forEach(function (note) {

      html += `<li class="note">

            <p class="header">

            <span class="date">${note.date}</span>

            <a href="#" class="listen-note" title="Listen to Note">Listen</a>

            <a href="#" class="edit-note" title="Edit Note">Edit</a>

            html = <button class="stop-note" onclick="abort = true">Stop</button>

            <a href="#" class="delete-note" title="Delete">Delete</a>

            </p>

            <p class="content">${note.content}</p>

            </li>`;

    });

  } else {

    html = '<li><p class="content">You don\'t have any notes yet.</p></li>';

  }

  notesList.html(html);

}

Answer 1

abort是一个局部变量，false当他们单击笔记列表时，您将其设置为。所以onclick="abort = true"对函数中正在测试的变量没有影响。您需要将其设为全局变量。window.abort = false;notesList.on('click', function (e) {&nbsp; e.preventDefault();&nbsp; var target = $(e.target);&nbsp; // Listen to the selected note.&nbsp; if (target.hasClass('listen-note')) {&nbsp; &nbsp; if (abort) {&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; var content = target.closest('.note').find('.content').text();&nbsp; &nbsp; readOutLoud(content);&nbsp; }&nbsp; //Edit Note&nbsp; if (target.hasClass('edit-note')) {&nbsp; &nbsp; editText(content);&nbsp; &nbsp; var dateTime = target.siblings('.date').text();&nbsp; &nbsp; deleteNote(dateTime);&nbsp; &nbsp; target.closest('.note').remove();&nbsp; &nbsp; var content = target.closest('.note').find('.content').text();&nbsp; }&nbsp; // Delete note.&nbsp; if (target.hasClass('delete-note')) {&nbsp; &nbsp; var dateTime = target.siblings('.date').text();&nbsp; &nbsp; deleteNote(dateTime);&nbsp; &nbsp; target.closest('.note').remove();&nbsp; }});