在页面加载问题上使用 javascript 删除和添加类答案

【问题标题】：remove and add class with javascript on page load issue在页面加载问题上使用 javascript 删除和添加类
【发布时间】：2019-02-21 10:41:00
【问题描述】：

当我使用 javascript 添加或删除一个类时，然后重新加载页面..

它不会工作

我尝试了这段代码，并把它放在的标题上

<script>
    $(document).ready(function() {
  $('.boxAdRight').removeClass('boxAdRight').addClass('active');
});
</script>

这是我的 HTML 我想删除类 boxAdRight 并用 .active 类进行更改

<div class="panel-body">
   <div class="tab-content">
      <div class="tab-pane fade in active" id="data">
         <div class="getData">
            <div class="row">
               <div class="col-md-12 col-sm-12 col-xs-12">
                  <div class="servers">
                     <ul>
                        <li class="active" 
                           id="s_0"onclick="getServer(this.id,0);"> 
                           <i class="fa fa-video-camera"></i> server1
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="col-md-3 col-sm-4 col-xs-12 fRight">
                  <div class="episodes boxAdRight">
                     <h2>episodes</h2>
                     <ul>
                        <li>
                           <a href="http://localhost/wordpress/newarticle13/">                                  episode 1</a>
                        </li>
                        <li class="active"><a href="http://localhost/wordpress/newarticle13/"> episode 2</a>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="col-md-9 col-sm-8 col-xs-12 fRight">
                  <div class="boxVideos">
                     <div class="getCode"><iframe src="https://*******" scrolling="no" frameborder="0" width="700" height="430" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

谢谢你

【问题讨论】：

“它不起作用”是什么意思？你检查过浏览器控制台的错误信息吗？
感谢您的回复，是的，我检查了我的浏览器，没有错误！
你用 javascript 改变类，没关系。然后你说你重新加载页面。您是说您希望更改在页面重新加载时保持不变？
@LelioFaieta 重新加载页面部分也引起了我的注意，但是每次加载页面时代码都应该以相同的方式执行，所以我仍然对 OP 的问题感到困惑。不清楚。
我正在做wordpress，我可以在页面的源代码上看到javascript的代码，但没有任何改变

标签： javascript jquery html wordpress

【解决方案1】：

作为第一个观察，我想提一下这样一个事实，即 JQuery 的 removeClass 函数返回一个或多个空格分隔的类名，这些类名应该被删除。因此，您不应将 addClass 应用于 removeClass 的结果。

您的代码中可能还有其他问题...

【讨论】：

【解决方案2】：

我认为方法调用的顺序应该是

$('.boxAdRight').addClass('active').removeClass('boxAdRight');

在原始示例 $('.boxAdRight').removeClass('boxAdRight').addClass('active'); 中，使用了选择器 .boxAdRight，但随后使用 .removeClass('boxAdRight') 删除了该类，因此在没有匹配元素的选择器上调用了 .addClass('active')。

【讨论】：

不，这是不正确的。它会正常工作。测试一个简单的例子就证明了这一点。 jsfiddle.net/j08691/2aqt7uow

【解决方案3】：

这样就解决了

$('.episodes').addClass('active').removeClass('boxAdRight');

在正常情况下，你的也必须工作吗？

【讨论】：

我试了jsfiddle.net/j08691/2aqt7uow，效果很好！如果你想有活跃的课程。用 f 12 打开控制台，你会看到 active 被添加到你的 div 中
是的，我明白了，它对你有用，但就我而言，我正在使用 wordpress，我在 header.php 的部分中添加了代码

【解决方案4】：

您还可以通过替换类而不是删除它来简化此代码。

$('.boxAdRight').className = 'active';

how to replace class HTML name with javascript

【讨论】：

谢谢，我也试过那个代码，但是那个类仍然

【解决方案5】：

用 .episodes 类替换您的 .boxAdRight 类，它会按您的意愿工作。

  <script>
        $(document).ready(function() {
            $(".episodes").removeClass("boxAdRight").addClass("active");
       });
    </script>

【讨论】：

配合得很好
您是否从“
”这一行中删除了“episodes”类？或检入私人浏览器或 CTRL+F5。可能是缓存问题。