javascript - 检测数据属性何时发生变化

Question

我目前正在开发一个微型网站，我想根据父容器数据属性是否发生更改来交换内容。

<div id="app" data-page="1"></div>

接下来我有一个按钮，用于获取数据属性，然后在单击时递增。

var page = +$('#app').attr('data-page');
$('#button__page-change').on('click', function() {
  page = page + 1;
  $('#app').attr('data-page', page);
});

现在的下一步是检测该页面何时发生更改。我正在沿着 switch 语句的思路思考。

switch (page) {
  case 2:
    console.log('page: ', page);
  break;
  case 3:
    console.log('page: ', page);
  break;
  default: 
   console.log('switch statement does not appear to be working');
  break;
}

该开关似乎不满足任何条件，因此将进入默认情况。但话虽如此，我试图将其放入 on-change 函数中。但我似乎没有任何运气，因为控制台没有记录任何内容。

任何意见都将不胜感激。预先感谢您。

Answer 1

好吧，如果你只能使用$.data()函数，你可以拦截它的执行，如下所示:

• 获取当前 jQuery 的 data 函数。
• 执行原生 jQuery 的 data 函数。
• 获取结果。
• 执行页面检测逻辑。
• 从 jQuery 的 data 函数返回结果。

var page = +$('#app').data('page');

var dataFn = $.fn.data;
$.fn.data = function(value, data) {
  var result = dataFn.call(this, value);
  executePageDetection(value, data);
  return result;
};

$('#button__page-change').on('click', function() {
  page = page + 1;
  $('#app').data('page', page);
});

var executePageDetection = function() {
  switch (page) {
    case 2:
      console.log('page: ', page);
      break;
    case 3:
      console.log('page: ', page);
      break;
    default:
      console.log('switch statement does not appear to be working');
      break;
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" data-page="1"></div>

<button id='button__page-change'>Click me</button>