javascript - 使用 .preventDefault() 合并两个相似的函数 - javascript

Question

我有两个相似的函数，function done 和 function delete。

我想将它们合并在一起，但我不知道如何正确合并它们。我在后端为 php 做了它，但是对于 javascript 我无法让它工作。

假设我有这两个按钮的 jquery

我从类似这样的东西开始，它工作正常，没有任何问题，但我想将它们合并在一起会很好，因为它们非常相似。

  $('ol#textField').on('click', '.done-btn', doneButton);
  $('ol#textField').on('click', '.delete-btn', deleteButton);

我的 deleteButton 和 doneButtion 函数

function deleteButton(e){
    e.preventDefault();

    var $clicked = $(this);
    var $cLI = $clicked.closest('li');
    var todoText = $cLI.clone().children().remove().end().text();
    var getID = $cLI.attr('id');

    $.ajax({
                // codes
        }
    });
}

function doneButton(e){
    e.preventDefault();

    var $clicked = $(this);
    var $cLI = $clicked.closest('li');
    var $cSpan = $clicked.closest('span');
    var todoText = $cLI.clone().children().remove().end().text();
    var getID = $cLI.attr('id');

    $.ajax({
            //codes
        }
    });
}

正如所见，它们是一样的，但当然除了我没有添加的 ajax 部分，因为它会包含太多代码，我认为这些代码没有任何问题。

所以我尝试了类似的方法来组合它们，但没有用。

$('ol#textField').on('click', '.done-btn', doubleD('done'));
$('ol#textField').on('click', '.delete-btn', doubleD('delete'));

我试过这样组合函数。所以如果参数是 done 那么 done ajax 将被调用并且参数是 delete 那么 delete 将被调用。我还想将 .preventDefault() 添加到函数中，但不知道如何完成它们。

function doubleD(action){
      var $clicked = $(this);
      var $cLI = $clicked.closest('li');
      var todoText = $cLI.clone().children().remove().end().text();
      var getID = $cLI.attr('id');

      if(action == 'done'){
          var $cSpan = $clicked.closest('span');
          $.ajax({
                // ajax for done
              }
          });
      }

      if(action == 'delete'){
          $.ajax({
                // ajax for delete
              }
          });
      }
  }

有人可以帮我一下吗？

感谢您的时间和关注。

Answer 1

问题是 jQuery 不会将您的参数传递给处理程序。您必须将其添加为事件数据。引用:http://api.jquery.com/on/

试试这个:

$('ol#textField').on('click', '.done-btn', { action: 'done' }, doubleD);
$('ol#textField').on('click', '.delete-btn', { action: 'delete' }, doubleD);

然后你会这样访问:

function doubleD(evt){
  var action = evt.data.action; // ACCESS THE PARAMETER HERE

  var $clicked = $(this);
  var $cLI = $clicked.closest('li');
  var todoText = $cLI.clone().children().remove().end().text();
  var getID = $cLI.attr('id');

  if(action == 'done'){
      var $cSpan = $clicked.closest('span');
      $.ajax({
            // ajax for done
          }
      });
  }

  if(action == 'delete'){
      $.ajax({
            // ajax for delete
          }
      });
  }
}

我不推荐这样写，但是你也可以这样写:

$('ol#textField').on('click', '.done-btn', function () {
    doubleD('done');
});
$('ol#textField').on('click', '.done-btn', function () {
    doubleD('delete');
});

然后，您原来的 doubleD 函数就可以工作了。