我目前正在一个微网站上,我希望根据是否更改父容器数据属性来交换内容。
<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/