当我想要应用类的元素进入视口时，有没有办法添加类？或者当屏幕底部超过元素顶部一定距离时？
现在我有我想要使用这样的效果：
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
问题在于它是相对于文档高度的，所以当我缩小页面（或在移动设备上查看）并且元素堆叠在一起时，页面变得更高并且类（动画）在元素进入视野。
我看到其他人提出了类似的问题，我试图实施他们得到的答案，但我无法得到任何帮助，因此将不胜感激。
这就是我所拥有的：
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
$(document).ready(function() {
$(".graph-line.one").addClass("graph-75");
$(".graph-line-2.one").addClass("opacity");
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
$(".graph-line-2.two").addClass("opacity");
}
if ($(document).scrollTop() > 450) {
$(".graph-line.three").addClass("graph-75");
$(".graph-line-2.three").addClass("opacity");
}
if ($(document).scrollTop() > 800) {
$(".graph-line.four").addClass("graph-75");
$(".graph-line-2.four").addClass("opacity");
}
if ($(document).scrollTop() > 1150) {
$(".graph-line.five").addClass("graph-75");
$(".graph-line-2.five").addClass("opacity");
}
if ($(document).scrollTop() > 1500) {
$(".graph-line.six").addClass("graph-75");
$(".graph-line-2.six").addClass("opacity");
}
});
});.graph {
display: block;
margin: 100px auto;
transform: rotate(-90deg);
will-change: transform;
}
.graph-line {
stroke-dasharray: …我想知道为什么这不起作用？
var attr = $("a").attr('rel');
if (typeof attr == 'lightBox') {
$(this).addClass("lightbox");
}
我想在一个REL属性设置为"lightBox"的链接中添加一个类.
这应该工作......对吗？
这非常令人沮丧.这是为表单编写的一些代码的一部分.与验证错误关联的输入元素应显示红色边框.它适用于.css方法,但如果有人能告诉我为什么.addClass方法不起作用,我将不胜感激.
<style type="text/css">
.field_error{color:red;}
.red_border{border:1px solid red;}
</style>
<script>
$(document).ready(function(){
$('.field_error').siblings().addClass('red_border');
});
</script>
...
<label class="description" for="element_1">Email Address </label>
<div>
<input id="element_1" name="email" class="element text medium" type="text"/>
{% if form.email.errors %}
<div class="field_error">{{form.email.errors}}</div>
{% endif %}
</div>
..etc..
如果只为一个类分配"element_1",它就可以正常工作.
我也可以这样做:
$('.field_error').siblings().css("border", "1px solid red");
但是,我计划在我要添加的类中添加大量内容. 有没有办法让addClass方法工作？
谢谢!!
马特
我忘了在我的代码中添加多个类.难怪有些人感到困惑.请再次查看代码.
<input id="element_1" name="email" class="element text medium" type="text"/>
问题是我有css文件已经定义了文本输入元素的边框.现在修复了.感谢大脑和我一起存储的所有人.
问题: 我想在一个li元素的子元素中添加一个类.
HTML代码:
<li class="active">
<a href="index.html" title="Homepage">Homepage<i class="icon-home"></i></a>
</li>
jQuery代码:
<script type="text/javascript">
$(document).ready(function()
{
$('li[ class="active" ]').hover(
function(){ $(this).addClass('icon-white') },
function(){ $(this).removeClass('icon-white') }
)
});
</script>
期望的结果:
<li class="active">
<a href="index.html" title="Homepage">Homepage<i class="icon-home icon-white"></i></a>
</li>
将类添加到特定元素的代码:
<script type="text/javascript">
$(document).ready(function()
{
if ($('#main-nav > li').hasClass('active') == true)
{
$("a > i", this).addClass('icon-white');
}
});
</script>
更新(最终解决方案):
<script type="text/javascript">
$(document).ready(function()
{
$('#main-nav li').hover(function()
{
if ($(this).hasClass('active') != true)
{
$('a', this).find('i').toggleClass('icon-white');
}
});
$("#main-nav li.active > a > i").addClass('icon-white');
});
</script> …这个jquery切换了两件事.(1)css类和(2)显示div.如果我在元素外部单击(菜单切换),切换效果很好,但如果我在元素内部单击,则div切换,但css类不会.这是为什么？
在http://jsfiddle.net/aL7Xe/68/上实时预览
我需要添加的css类在第二次点击"菜单切换"时消失.
<div id="menuwrap">
<a href="#" id="menutoggle">Menu Toggle</a>
<ul id="menucontainer">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
this is more text
<script>
$('html').click(function() {
$('#menucontainer').hide();
$('#menutoggle').removeClass('menutoggle');
});
$('#menuwrap').click(function(event){
event.stopPropagation();
});
$('#menutoggle').click(function(event){
$('#menucontainer').toggle();
$(this).addClass('menutoggle');
});
</script>
jQuery如何在单击#button时将一个类逐个添加到元素中,延迟很小？不要为所有元素一次添加类.我想逐个添加.请帮忙.提前致谢.
<ul id="scroll-set">
<li class=" imVisible">Brentwood</li>
<li class="imVisible ">Antioch</li>
<li class=" imVisible">Pittsburg</li>
<li class=" imVisible">Concord</li>
<li class="imVisible ">Walnut Creek</li>
<li class=" imVisible">Danville</li>
<li class=" imVisible">San Ramon</li>
</ul>
<div id="button">
我有以下代码似乎不起作用.
$("ul li a").live("click", function() {
$(".myMegaMenuDiv").addClass('hideit').delay(300).removeClass('hideit');
});
我有一个超级菜单,所以当你将鼠标悬停在一个菜单项上时,它会显示一个div".myMegaMenuDiv".但是,当我单击该div中的链接时,我希望它消失,因为它目前没有.我希望上面的代码可以解决这个问题.
"hideit"添加"display:none"的值
它只在我有"addClass"时有效,但是当我添加"delay"和"removeClass"时它就会停止工作.
编辑:另外...我隐藏".myMegaMenuDiv"后,当我将鼠标悬停在导航菜单项上时,菜单没有显示,所以它也需要删除该类
我希望能够将类添加"wp"到我"sub-menu dropdown-menu"班级之前的每个锚标记中.我该怎么做呢？
我目前的HTML:
<a href="google.com">one</a>
<ul class="sub-menu dropdown-menu">
<li id="menu-item-5">
<a href="">five</a>
</li>
</ul>
<a href="google.com">one</a>
<ul class="sub-menu dropdown-menu">
<li id="menu-item-5">
<a href="">five</a>
</li>
</ul>
期望的输出
<a href="google.com" class="wp">one</a>
<a href="google.com" class="wp">one</a>
我问了这个问题的早期版本并学会了使用.css来改变课程.但是,我决定使用addClass和removeClass(这将使我将要引入的后续函数更容易).
这是代码和jsfiddle:
$(function(){
if($.trim($('.text-edit1').val()).length){
$(this).addClass('active-text');
});
});
我想要做的就是在用户输入textarea时添加背景颜色,并在删除文本时删除颜色.我试着编写函数的开头但是无法让它工作......
如果有人知道如何做到这一点会很棒.提前致谢!
目前我有一个手风琴菜单,每次.responsive-accordion-head点击我告诉它切换类如下:
$('.responsive-accordion-head').click(function () {
if ( $( '.responsive-accordion-head i' ).hasClass( "plus-2" ) ) {
$('.responsive-accordion-head i').removeClass("plus-2");
$('.responsive-accordion-head i').addClass("minus-2");
} else {
$('.responsive-accordion-head i').removeClass("minus-2");
$('.responsive-accordion-head i').addClass("plus-2");
}
});
我遇到的问题是上面的代码更改了所有.responsive-accordion-head元素的类.我需要它仅针对所点击的项目.我该怎么做呢？