Question

当我通过.on('click', '.time_tracked_starttime', function() {点击事件时，我正在调用函数$.fn.downCount();，此时我创建了var container = this，以便我可以在其他函数countdown()中使用它/ p>

问题是我需要从上面的parent()访问容器。像$(this).parent().parent();这样的东西，所以我可以正确找到container.find('.hours').html();

我尝试了var container = $(this),parent().parent();，但仍然以undefined

返回

＆＃13;

//timer//
$.fn.downCount = function() {
  var container = $(this).parent().parent();

  function countdown() {
    var hours = container.find('.hours').html();
    alert(hours)
    var minutes = container.find('.minutes').html();
    var seconds = container.find('.seconds').html();

    if (seconds == '59') {
      seconds = '00';
      minutes = parseInt(minutes) + 1;
    } else {
      seconds = parseInt(seconds) + 1;
    }

    if (minutes == '59') {
      minutes = '00';
      hours = parseInt(hours) + 1
    }

    // fix dates so that it will show two digets
    hours = (String(hours).length >= 2) ? hours : '0' + hours;
    minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
    seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

    // set to DOM
    container.find('.hours').html(hours);
    container.find('.minutes').html(minutes);
    container.find('.seconds').html(seconds);
  };

  // start
  var interval = setInterval(countdown(container), 1000);
};
//timer//

$(document).on('click', '.time_tracked_starttime', function() {
  var time_tracked_id = $(this).attr('data-id');
  var thisstart = $(this);
  var current_time = $(this).parent().parent().find('.each_hours').text();
  // start timer
  $.fn.downCount();
  // start timer
  $.ajax({
    type: 'post',
    url: '/includes/time_tracked_start_timer.php',
    data: {
      time_tracked_id: time_tracked_id
    },
    success: function(data) {
      thisstart.hide();
      thisstart.next().next('.time_tracked_edit').hide();
      thisstart.next('.time_tracked_stoptime').show();
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thistimetrackid" class="col-sm-12">
  <div class="col-sm-12">
    <a class="pointer time_tracked_starttime" data-id="12345" style="color: green">Start Time</a>
  </div>
  <span class="pull-right countdown"><strong class="each_hours"><span class="hours">01</span>:<span class="minutes">30</span>:<span class="seconds">57</span></strong> Hrs</span>
</div>

＆＃13;

Answer 1

您需要在jQuery对象上调用downCount函数，然后它将以this的形式接收该对象。

thisstart.downCount();

此外，setInterval的参数必须是函数，而不是对函数的调用。并且你用一个参数调用countdown，即使它没有参数。

//timer//
$.fn.downCount = function() {
  var container = $(this).parent().parent();

  function countdown() {
    var hours = container.find('.hours').html();
    alert(hours)
    var minutes = container.find('.minutes').html();
    var seconds = container.find('.seconds').html();

    if (seconds == '59') {
      seconds = '00';
      minutes = parseInt(minutes) + 1;
    } else {
      seconds = parseInt(seconds) + 1;
    }

    if (minutes == '59') {
      minutes = '00';
      hours = parseInt(hours) + 1
    }

    // fix dates so that it will show two digets
    hours = (String(hours).length >= 2) ? hours : '0' + hours;
    minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
    seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

    // set to DOM
    container.find('.hours').html(hours);
    container.find('.minutes').html(minutes);
    container.find('.seconds').html(seconds);
  };

  // start
  var interval = setInterval(countdown, 1000);
};
//timer//

$(document).on('click', '.time_tracked_starttime', function() {
  var time_tracked_id = $(this).attr('data-id');
  var thisstart = $(this);
  var current_time = thisstart.parent().parent().find('.each_hours').text();
  // start timer
  thisstart.downCount();
  // start timer
  $.ajax({
    type: 'post',
    url: '/includes/time_tracked_start_timer.php',
    data: {
      time_tracked_id: time_tracked_id
    },
    success: function(data) {
      thisstart.hide();
      thisstart.next().next('.time_tracked_edit').hide();
      thisstart.next('.time_tracked_stoptime').show();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thistimetrackid" class="col-sm-12">
  <div class="col-sm-12">
    <a class="pointer time_tracked_starttime" data-id="12345" style="color: green">Start Time</a>
  </div>
  <span class="pull-right countdown"><strong class="each_hours"><span class="hours">01</span>:<span class="minutes">30</span>:<span class="seconds">57</span></strong> Hrs</span>
</div>

Answer 2

您的问题是，您从已获得容器的范围调用$.fn.downCount()，但您没有将其传递给此方法。所以我在fn.downCount函数和嵌套的countdown()方法中添加了一个容器参数。

这是当前范围的初始调用：

// start timer
$.fn.downCount($(this).parent().parent());
// start timer

此外，我已将.html()替换为.text()，因为您只是在此更改文字值。

这是更新的小提琴：https://jsfiddle.net/4fw0nx6d/1/

如何将$（this）传递给函数然后使用parent（）

2 个答案: