Jquery addClass 在手机上不起作用答案

【问题标题】：Jquery addClass not working on mobile phonesJquery addClass 在手机上不起作用
【发布时间】：2021-11-10 19:08:05
【问题描述】：

所以我试图让动画在视口上可见时开始，它可以工作，但问题是它只能在桌面上工作，在手机上不行。

我在堆栈上看到了很多这样的问题，但看起来没有答案，像这样，来自 2014 Jquery addClass not working on mobile browser，有 0 个答案。

这是我的代码

    // function to detect if an element is scrolled into view
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
};

// listen for scroll event
$(window).scroll(function () {
  // check if element is scrolled into view
  if (isScrolledIntoView($('#don'))) {
    // element is scrolled into view, add animation class
    $( "#don" ).removeClass( "donut-segment" ).addClass( "donut-segment" );
  }
});

有什么想法吗？

【问题讨论】：

你试过香草js吗？ codegrepper.com/code-examples/javascript/…
@SKJ 不，但这看起来是个好主意，问题是我不知道如何在 vanilla javascript 中执行相同的算法，如果您知道，您可以发布答案吗？
我的回答解决了你的问题吗？如果是，请验证它:)

标签： javascript html jquery mobile

【解决方案1】：

最好的解决方案是使用延迟我认为与 setTimeout 功能。

$(function() {
  $('button').click(function() {
    setTimeout(function(){
       $("#don").removeClass("donut-segment");
    }, 50);
    setTimeout(function(){
       $("#don").addClass("donut-segment");
    }, 100);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="don" class="donut-segment"></div>
<button>Test</button><br>

【讨论】：