用jquery添加和删除CSS类

我想用jquery调整页脚的大小。到目前为止，当我调整窗口大小时，它不会添加该类。我是否正确实施？用jquery添加和删除CSS类

/* My jQuery: */ 
 

 
$(document).ready(function() { 
 
\t $(window).on('resize', function(){ 
 
\t \t var win = $(this); 
 
    \t if (win.width() > 600) { 
 
    \t \t $("#anc").addClass('social-lg'); 
 
    \t \t $("#ico").addClass("icon-lg"); 
 
    \t } else { 
 
    \t \t $("#anc").addClass('social-sm'); 
 
    \t \t $("#ico").addClass("icon-sm"); 
 
    \t \t } 
 
\t }); 
 
});

/* My CSS: */ 
 

 
.social-lg div.col-md-12 > ul > li > a { 
 
    border: 2px solid #616161; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    letter-spacing: normal; 
 
    text-align: center; 
 
    height: 4.25rem; 
 
    width: 4.25rem; 
 
} 
 
.icon-lg div.col-md-12 > ul > li > a > i { 
 
    padding-top: .5rem; 
 
    font-size: 2em; 
 
} 
 
.social-sm div.col-md-12 > ul > li > a { 
 
    border: 2px solid #616161; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    letter-spacing: normal; 
 
    text-align: center; 
 
    height: 3.25rem; 
 
    width: 3.25rem; 
 
} 
 
.icon-sm div.col-md-12 > ul > li > a > i { 
 
    padding-top: .5rem; 
 
    font-size: 1.5em; 
 
}

<!-- My HTML: --> 
 

 
<div class="row" id="footer"> 
 
    <div class="col-md-12"> 
 
    <ul> 
 
     <li><a id="anc" class="nostyle" href="https://www.linkedin.com/in/"><i id="ico" class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li> 
 
     <li><a id="anc" class="nostyle" href="https://github.com/"><i id="ico" class="fa fa-github fa-2x" aria-hidden="true"></i></a></li> 
 
     <li><a id="anc" class="nostyle" href="https://www.instagram.com/_/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> 
 
     <li><a id="anc" class="nostyle" href="https://twitter.com/"><i id="ico" class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li> 
 
     <p>Lorem Ipsum</p> 
 
    </ul> 
 
    </div> 
 
</div>

编辑：这个问题里面嵌入代码，而不是提供链接

来源

2016-10-06 Quesofat

这可能是http://stackoverflow.com/questions/9828831/jquery-on-window-resize的副本（即使没有，该答案可能会有所帮助）。此外，您可能需要确定问题所在。在你的resize处理程序中抛出一个'console.log（'foo'）';如果在调整大小时没有看到“foo”记录，则知道处理程序是问题。如果你确实看到它，你就知道问题出在处理器内部的逻辑上。 – machineghost

除了@machineghost评论，在Stackoverflow中，您必须提供您尝试过的代码。 – SaidbakR

@sємsєм公平地说，他确实很难认出（“在此处输入链接描述”链接到pastebin）。只是要说明在发布之前完全写一个问题是多么重要，而不是在发布之后急于修复它（我也有时犯了一个错误）。 – machineghost

你有一些对李同一个ID参数和我的标签，防止jQuery来选择相同ID的所有元素，因此，要使他们班像以下

<div class="row" id="footer"> 
      <div class="col-md-12"> 
       <ul> 
        <li><a class="anc nostyle" href="https://www.linkedin.com/in/"><i class="ico fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li> 
        <li><a class="anc nostyle" href="https://github.com/"><i class="ico fa fa-github fa-2x" aria-hidden="true"></i></a></li> 
        <li><a class="anc nostyle" href="https://www.instagram.com/_/"><i class="ico fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> 
        <li><a class="anc nostyle" href="https://twitter.com/"><i class="ico fa fa-twitter fa-2x" aria-hidden="true"></i></a></li> 
        <p>Lorem Ipsum</p> 
       </ul> 
      </div> 
     </div>

然后使用修改后的JavaScript代码

$(document).ready(function() { 
    $(window).on('resize', function() { 
    var win = $(this); 
    if (win.width() > 600) { 
     $(".anc").addClass('social-lg').removeClass('social-sm'); 
     $(".ico").addClass("icon-lg").removeClass("icon-sm"); 
    } else { 
     $(".anc").addClass('social-sm').removeClass('social-lg'); 
     $(".ico").addClass("icon-sm").removeClass("icon-lg"); 
    } 
    }).trigger("resize"); //this to force first event on load 
});

来源

2016-10-07 00:39:44

如果我实现了这个javascript（我console.logged它），但看起来没有改变的CSS或至少它看起来如何。 – Quesofat

你没有包括的情况下，当有需要删除一类再拍一项工作。切换类应该修复它。

编辑：在这种情况下切换不起作用。你必须使用另一种解决方案：

$(document).ready(function() { 
 
    $(window).on('resize', function() { 
 
    var win = $(this); 
 
    if (win.width() > 600) { 
 
     $("#anc").addClass('social-lg'); 
 
     $("#ico").addClass("icon-lg"); 
 
     $("#anc").removeClass('social-sm'); 
 
     $("#ico").removeClass("icon-sm"); 
 
    } else { 
 
     $("#anc").addClass('social-sm'); 
 
     $("#ico").addClass("icon-sm"); 
 
     $("#anc").removeClass('social-lg'); 
 
     $("#ico").removeClass("icon-lg"); 
 
    } 
 
    }); 
 
});

来源

2016-10-07 00:00:54

用jquery添加和删除CSS类

回答

相关问题