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 (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;
}

交换机似乎不符合任何条件，因此转到默认情况。但话说回来，我试图将其置于改变功能中。但是由于没有记录到控制台，我似乎没有任何运气。

任何输入都将不胜感激。提前谢谢。

Answer 1

好吧，如果您只能使用$.data()功能，则可以按照以下步骤拦截其执行：

获取当前jQuery＆＃39; data函数。
执行原生jQuery＆＃39; data功能。
获得结果。
执行页面检测逻辑。
从jQuery的data函数返回结果。

＆＃13;

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;
  }
};

＆＃13;

<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>

＆＃13;

Answer 2

因此，当我发布这个时，我实际上想到了如果我将switch语句放在on click函数中。由于导航流程始终是单击按钮，为什么不将开关语句粘贴在那里。如果有人有任何建议，我很乐意听到他们的意见。但这似乎对我有用。

$('button').on('click', function(){
switch (page) {
  case 1: 
    console.log('page: ', page);
  break;    
  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;
}   
});

Answer 3

这似乎正在做你想要的。我使用get和set属性来查找数据页然后添加到它。

function check(){
var dt = document.getElementById("app");
var att = dt.getAttribute("data-page")
var page = parseInt(att)  + 1 
dt.setAttribute("data-page", page);

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' + page);
  break;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" data-page="1"></div>
<input type="button" onclick="check();" value="go">

检测数据属性何时更改

3 个答案: