在 jquery 选择器中无法识别更改的数据属性答案

【问题标题】：Changed data attribute not recognized in jquery selector在 jquery 选择器中无法识别更改的数据属性
【发布时间】：2022-01-07 02:39:26
【问题描述】：

我有以下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 后，控制台会显示“测试”，但它不会...

你能告诉我我做错了什么吗？

提前致谢！

【问题讨论】：

标签： javascript html jquery custom-data-attribute

【解决方案1】：

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

【讨论】：

【解决方案2】：

问题是页面是在数据页面设置为第一时呈现的，当你再次点击它时，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：复制你的函数绝不是一个好主意，如果你可以在动态函数中设置所有内容，读取所有内容，更容易在功能中调试，并且更轻巧，更干净

【讨论】：

【解决方案3】：

这个方法有帮助：

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

【讨论】：

谢谢，但这并不是检测第二次点击。更多的是在选择器中使用更新后的数据属性值。