jQuery UI 日期选择器在时钟更新样式时 运行

Question

我正在使用 jquery ui 日期选择器（计时器创建）和自定义的日期时间选择器。

我正在尝试更新单击按钮的样式。更新后一直在重置为默认样式

预期：

我得到的是：

jsFiddle

HTML

<div class="container">
  <p>Date: <input type="text" id="datetimepicker"></p>
  <div id="clock"></div>
</div>    

<div class="btnHolder">
  <input type="button" value="Change font color" id="fontColor" />
  <input type="button" value="Change font size" id="fontSize" />
</div>

Script

$(document).ready(function(){

  $(function() {
    $( "#datetimepicker" ).datetimepicker({ 
      minDate:0,
      timeInput: true,
      timeFormat: "hh:mm tt"
    });
  });

  // on changing date initilize the countdown again
  $("#datetimepicker").change(function(){
    init($(this).val());
  })

  function init(dt){
    $('#clock').countdown(dt).on('update.countdown', function(event) {
      var $this = $(this).html(event.strftime(''
      + '<span>%-w</span> week%!w '
      +'<span>%-d</span> day%!d '
      + '<span>%H</span> hr '
      + '<span>%M</span> min '
      + '<span>%S</span> sec'));
    });
  }

  //initilize counter on load with some default date
  //init("2016/11/25");

});

jQuery(document).on('click', '#fontColor', function(){
  jQuery('#clock span').css({'color': 'red'})
})

jQuery(document).on('click', '#fontSize', function(){
  jQuery('#clock span').css({'font-size': '20px'})
})

Answer 1

您每秒用无样式的周、天等 <span>...</span> 替换内容。因此，即使您在单击按钮时在 span 上正确设置了样式，它也会每秒再次被无样式的内容替换一次。 您可以在外部 #clock 元素

上设置一个 class

jQuery(document).on('click', '#fontColor', function() {
  jQuery('#clock').addClass('red');
});

并添加以下内容css：

.red > span {
  color: red;
}

> 选择 #clock.red 元素的直接子元素并将它们的颜色设置为红色。 （有关子组合器的更多信息 here。）

已更新 JSFiddle here。