Question

我有两个类似的功能，功能完成和功能删除。

我想将它们合并在一起，但我不知道如何正确合并它们。我在后端为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 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功能将起作用。

Answer 2

你有没试过这个

  $('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'  ){
  ...

有些人可能会说这不是＆＃34;最佳做法＆＃34;这样做的方式真的是最好的方法，仍然是使用event.data。因为虽然它在演示文稿上不那么松懈，但仍然存在依赖于DOM元素的元素。

使用.preventDefault（） - javascript合并两个类似的函数

2 个答案: