javascript - 如何设置共享同一类的元素的样式

Question

我有一个共享同一类的页面，我希望一个页面 (top.cfm) 有一个带有背景颜色的边框，但我不希望 (landing page.cfm) 有边框或背景-颜色。这是我的 jQuery 代码。我哪里出错了？

$(function(){
        if (window.location.pathname == "common/top.cfm") {
              $('.content-padding').show('.content-padding').css('background-color', '#fff', 'border', '1px solid #CCCCCC');
        } else (window.location.pathname == "common/landing_page.cfm")
        {
              $('.content-padding').css('background-color', '#E1E1E0', 'border', 'none')
        }
   });

Answer 1

看起来您正在使用 else 但带有条件。尝试使用 else if 代替。

如果需要，您可以创建两个单独的类并在它们上使用切换类。

代码

$(document).ready(function () {
  if (window.location.pathname == "common/top.cfm") {    
       $('#content').toggleClass('content-padding-top');
  }else if(window.location.pathname == "common/landing_page.cfm"){
       $('#content').toggleClass('content-padding-landing-page');
  }
});

.content-padding-top{
    background-color:#fff;
    border:1px solid #CCCCCC;
}

.content-padding-landing-page{
    background-color:#E1E1E0;
    border:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container main-content content-padding content-bordered container_12 clearfix" id="content">
  <div class="grid_12 clearfix">
	<div class="clearfix" >
          <h1>Page Content</h1>
        </div>
  </div>
<div>