时间戳

首页 > 解决方案 > jQuery removeClass 在 Chrome 中不起作用

javascript - jQuery removeClass 在 Chrome 中不起作用

问题描述

从移动设备打开页面时，我正在尝试删除 CSS 类。

这是代码：

add_action( 'wp_footer', 'remove_slideup' );
function remove_slideup() {
    ?>
    <script type="text/javascript">
            jQuery(document).ready(function($) {
          var alterClass = function() {
            var ww = document.body.clientWidth;
            if (ww < 1025) {
                alert('under 1025!');
              $('.thumb-wrapper').removeClass('slideup');
              $('.thumb-wrapper').css({'overflow':'hidden', 'position':'relative', 'display':'block', 'margin-bottom':'10px'});
              $('.quick-view').hide();
            } else if (ww >= 1025) {
                alert('over 1024!');
              $('.thumb-wrapper').addClass('slideup');
              $('.quick-view').show();
            };
          };
          $(window).resize(function(){
            alterClass();
          });
          //Fire it when the page first loads:
          alterClass();
        });
    </script>
    <?php
}

基本上它正在改变这一点：

<div class="thumb-wrapper slideup">

在移动设备中对此：

<div class="thumb-wrapper">

问题是，这段代码在 Firefox 中运行良好，但在 Chrome 中却不行。

任何帮助表示赞赏，谢谢。

标签： javascriptcsswordpress

解决方案

基本上我猜这里的问题是Chrome Mobile浏览器就绪功能不会第二次触发，每：“document.ready（）”功能没有在Chrome Mobile（android）上触发

此外，可能会出现 jQuery 未在您的脚本之前加载的情况。确保它是来自JavaScript 的步骤 - 如何确保加载 jQuery？所以答案。

您也可以尝试将准备好的文档附件更新为以下代码：

var jq = jQuery.noConflict();
jq( document ).ready(function( $ ) {
  var alterClass = function() {
    var ww = document.body.clientWidth;
    if (ww < 1025) {
      alert('under 1025!');
      $('.thumb-wrapper').removeClass('slideup');
      $('.thumb-wrapper').css({'overflow':'hidden', 'position':'relative', 'display':'block', 'margin-bottom':'10px'});
      $('.quick-view').hide();
    } else if (ww >= 1025) {
      alert('over 1024!');
      $('.thumb-wrapper').addClass('slideup');
      $('.quick-view').show();
    };
  }
  $(window).resize(function(){
    alterClass();
  });
  //Fire it when the page first loads:
  alterClass();
});

我在这里使用了 $.noConflict，因为我不熟悉您的代码。

所提供的代码应该可以正常工作，所以问题出在其他地方。在调用alterClass之前添加console.log并检查alterClass是否在移动设备上的chrome中执行，如果是则记录document.body.clientWidth值，并确保ww < 1025条件评估为True，也许，Chrome上的宽度不同，所以你必须随身携带那个箱子，而不用碰你js。

推荐阅读