Question

我正在测试来自here的jquery计时器“TimeCircles”，我已经能够为 30分钟生成一分钟/秒计时器在 25分钟处发出警告警告，我正在尝试在 20分钟处添加一个阈值事件，这将改变圆圈的颜色。

我不完全确定如何在实例化后访问TimeCircles()属性。我们这样实例化：

$('#idle_timer').attr('data-timer',1800);
$('#idle_timer').TimeCircles({ time: { 
    Days: { show:false }, 
    Hours: { show:false }, 
    Minutes: { color: '#4D8DC1' }, 
    Seconds: { color: '#4D8DC1' } } })
  .addListener(
    function(unit,value,total) { 
        if (total == 1200) {  

            // CHANGE COLOUR OF TimeCircles HERE

        } else if (total == 1500) { 
            alert('Your session will expire in 5 minutes, you should save your work and / or reload the page.'); 
        } 
    } 
  );

在"total == 1200"的测试中，如何访问分钟/秒颜色属性，以便两者都可以更改为红色？ $(this)似乎无法使用？

Answer 1

我能够找到原始开发人员的解决方案。部分问题是动态设置的.data（）属性在他的代码中没有被考虑，已经更新了。从那里很简单，只需添加一个监听器，然后在其中测试total值，然后实例化一个覆盖原始实例的新实例......

$( document ).ready(function() {
var idle_timer = $('div#idle_timer',window.parent.document);
idle_timer.data('timer',15);
idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#4D8DC1' }, Seconds: { color: '#4D8DC1' } } })
.addListener(
    function(unit,value,total) { 
        if (total == 10) { 
            idle_timer.data('timer',10);
            idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#900' }, Seconds: { color: '#900' } } })
        } else if (total == 5) { 
            alert('Your session will expire in 5 seconds, you should save your work and / or reload the page.');
        } 
    } 
);
});

Answer 2

不知道这是否理想，但有效：

$('#idle_timer').data('TimeCircles_config', { time: { 
    Days: { show:false }, 
    Hours: { show:false }, 
    Minutes: { color: '#4D8DC1' }, 
    Seconds: { color: '#4D8DC1' } } }
);

$('#idle_timer').TimeCircles($('#idle_timer').data('TimeCircles_config'))
  .addListener(
    function(unit,value,total) { 
        if (total == 1200) {  
            var config = $(this).data('TimeCircles_config'); //If thid doesn't work, use $('#idle_timer').data(...)
            var minColor = config.Minutes.color;

            // CHANGE COLOUR OF TimeCircles HERE

        } else if (total == 1500) { 
            alert('Your session will expire in 5 minutes, you should save your work and / or reload the page.'); 
        } 
    } 
  );

希望这会有所帮助。干杯

jQuery TimeCircles事件侦听器范围

2 个答案: