用. preventdefault()合并两个相似的函数- javascript - merging two similiar functions with .preventDefault() - javascript

我有两个类似的函数，完成函数和删除函数。

我想把它们合并在一起，但我不知道如何正确地合并它们。我在php的后端做了，但对于javascript，不知怎么的，我不能让它工作。

我为这两个按钮设置了jquery比方说

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

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

my deleteButton and donebutton函数

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
              }
          });
      }
  }

有人能帮我一下吗?

感谢您的宝贵时间。

问题是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函数将工作。

你试过吗

  $('ol#textField').on('click', '.done-btn, .delete-btn', function(e){
        e.preventDefault();
        if( $(this).hasClass('done-btn') ){
        }else{
        }
  });

如果不是$(this)，你可以使用$(e.target)我也很确定，检查类会告诉你按钮，不是吗?

分隔调用，主要区别在于调用的范围。当它是事件的一部分时，$(this)便具有意义，如果它是独立的，那么你便失去了作用域。为了克服这个问题，你可以使用包含事件http://www.w3schools.com/jquery/event_target.asp的target的事件对象，你必须记住事件冒泡，但我认为在这种情况下(使用输入)你会没事的，如果你真的想要安全，你可以检查$(e.target).is('input[type="button"]')。总之:

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

function doubleD(e){
    e.preventDefault();
    if( $(e.target).hasClass('done-btn') ){
    }else{
    }        
};

然而，正如我在注释中所说，将逻辑从表示中分离出来(使用e.data)具有很大的价值。这意味着您不依赖于类名来实现逻辑。因此，如果您决定更改类，则不需要更新代码，因为它不依赖于您的表示(页面布局和样式)。

我实际上知道另一个答案，并计划添加它，但由于我不经常使用它，我不得不做一些谷歌搜索，以确保我记住它是正确的。另一张海报抢先了我一步。这很好，但我想指出这实际上是一个更好的方法。

也可以使用data- http://www.w3schools.com/tags/att_global_data.asp属性代替类，如

 <input type="button" class="done-btn" data-mode="done" />

检查

 if( $(this).data('mode') == 'done'  ){
  ...

有些人可能会说这不是"最佳实践"的方式，所以最好的方式，仍然是使用event.data。因为虽然它在表示上没有那么宽松，但仍然存在依赖于DOM元素的元素。