jquery 选择器无法识别已更改的数据属性

Question

我有以下 html 结构

<body data-page="first">
   <div class="start">Test</div>
</body>

及以下js

$('body[data-page="first"] .start').on('click',function (){
    body.attr('data-page','second');
});
$('body[data-page="second"] .start').on('click',function (){
    console.log('Test');
});

我希望在第二次单击 .start 后，控制台会显示“测试”，但它不会...

你能告诉我哪里做错了吗？

提前致谢！

Answer 1

这个方法可以帮助：

var timesClicked = 0;
  $('.start').on('click',function (){
    timesClicked++;
    if (timesClicked>1) {
    console.log('Test');
    }
});

Answer 2

问题是页面在 data-page 设置为第一个的情况下呈现，当您再次单击它时，javascript 的那部分仍然看到“第一个”，因为没有重新呈现，因此您需要一个动态函数，读取与该按钮的所有交互，然后检查该属性具有的值。这样你可以做无限个案例，然后继续下去。

$('body .start').on('click',function (){
  const attr = $('body').attr('data-page');
  if(attr === 'first') {
    $('body').attr('data-page','second');
  } else {
    console.log('second');
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-page="first">
   <div class="start">Test</div>
</body>

如果您不喜欢以所有“body”为目标的事实，这很奇怪，因为您应该只有 1 个 body，您可以使用 ID 来定位右一

PS：复制你的函数永远不是一个好主意，如果你可以在动态函数中设置所有内容，它会读取所有内容，更容易在功能中调试，并且更轻巧，更干净继续

Answer 3

$('body[data-page="first"] .start').click(function (){
       var body = $('body[data-page="first"] .start');
       body.attr('data-page','second');
    });

jquery 选择器无法识别已更改的数据属性

Changed data attribute not recognized in jquery selector

javascript

html

jquery

custom-data-attribute