我目前正在一个微网站上,我希望根据是否更改父容器数据属性来交换内容。

<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函数中。但是我似乎没有任何运气,因为没有任何内容登录到控制台。

任何投入将不胜感激。先感谢您。

最佳答案

好吧,如果只能使用$.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>

关于javascript - 检测数据属性何时更改,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48713847/

10-12 12:17
查看更多