javascript - 一个事件的多个功能不起作用

Question

所以我的问题背后的逻辑:

我有一个这样的列表:

    <ul>
      <li>
       <a href="#edit" data-transition="fade" class="editLink" data-kms="1" data-date="2015-06-02">Edit</a>
      </li>
      <li>
       <a href="#edit" data-transition="fade" class="editLink" data-kms="2" data-date="2015-06-02">Edit</a>
      </li>
      <li>
       <a href="#edit" data-transition="fade" class="editLink" data-kms="3" data-date="2015-06-02">Edit</a>
      </li>
    </ul>

因此，当我按下编辑链接时，我必须使用此功能收集data-kms和data-date，并将它们放入localStorage >:

function setCurrent() {
        //Set localStorage items for clicked element
        localStorage.setItem('currentKms', $(this).data('kms'));
        localStorage.setItem('currentDate', $(this).data('date'));

        //Get data
        var kms = localStorage.getItem('currentKms');
        var date = localStorage.getItem('currentDate');

        //Insert data into edit form
        $('#editKms').val(kms);
        $('#editDate').val(date);
    }

然后我想使用此函数从本地存储中删除该条目:

function deleteRun() {
        //Get Current Data
        var currentKms = localStorage.getItem('currentKms');
        var currentDate = localStorage.getItem('currentDate');

        var runs = getRunsObject();
        var i = 0;

        //Loop throuh runs and remove current run from 'runs' object
        while (i < runs.length) {
            //Remove Current Run
            if (runs[i].kms == currentKms && runs[i].date == currentDate) {
                runs.splice(i, 1);
                alert('Run Deleted');
            } else {
                alert('Run cant be deleted!');
            }
            //Save array without current run
            localStorage.setItem('runs', JSON.stringify(runs));
            i++;
        }

        //Show Runs Again
        $('.original').hide();
        showRuns();
        //Preventing form from submiting
        return false;

    }

所以基本上我必须同时在 1 个事件上运行 2 个函数。 我正在尝试这样做:

$('.deleteLink').on('tap', function(){
    setCurrent();
    deleteRun();
});

但由于某种原因，setCurrent 没有按预期保存数据，而是将值设置为 undefined。

但是如果我像这样运行它:

  $('.deleteLink').on('tap', setCurrent);

它工作正常，并且实际上为 currentKms 和 currentDate 设置了正确的值。

那么如何在同一事件上正确运行这两个函数？因为

 function(){
    setCurrent();
    deleteRun();
 });

由于某种原因在我的情况下不起作用。

Answer 1

根据您的方法，函数 setCurrent 中的 this 并不引用调用事件的元素。

您可以使用.call()

The call() method calls a function with a given this value and arguments provided individually.

$('.deleteLink').on('tap', function(){
    setCurrent.call(this);
    deleteRun();
});

<小时/>

您可以使用bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

代码

$('.deleteLink').on('tap', function(){
    setCurrent.bind(this)();
    deleteRun();
});