[英]Setting html classes CSS with jQuery
So I have an element 所以我有一个元素
<div class="accordion">hello</div>
and when an event happens(button clicked) several classes are added and removed to the element found above. 当事件发生时(单击按钮),将添加几个类并将其删除到上面找到的元素中。
The first phase adds the class beginning-transition
第一阶段添加类的
beginning-transition
<div class="accordion beginning-transition">hello</div>
The second phase adds the class middle-transition
and removes the beginning-transition
class. 第二阶段添加
middle-transition
类,并删除beginning-transition
类。
<div class="accordion middle-transition">hello</div>
The final stage removes the middle-transition
class 最后阶段去除
middle-transition
阶层
<div class="accordion">hello</div>
During this button click event I run a formula that determines the height of the div. 在此按钮单击事件期间,我运行一个确定div高度的公式。
var element = $('.accordion');
element.css('height', 10);
$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);
The problem is that when the two classes beginning-transition
and middle-transition
are added to the class, the CSS height does not change from 10px. 问题在于,当将两个类别的
beginning-transition
和middle-transition
添加到该类时,CSS高度不会从10px更改。
The following line below: 下面的行:
element.css('height', 10);
Seems to override these two css rules: 似乎要覆盖这两个CSS规则:
$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);
How can I fix this? 我怎样才能解决这个问题?
var element = $('.accordion');
element.css('height', 10);
$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);
So you're assigning a height… then assigning an override? 因此,您要分配一个高度…然后分配一个替代值? Just do it once.
只做一次。
var element = $('.accordion')[0];
if (element.classList.contains('beginning-transition')) {
element.style.height = '100px';
} else if (element.classList.contains('middle-transition')) {
element.style.height = '200px';
} else {
element.style.height = '10px';
}
That's vanilla JS, but it's the same thing (with different names) in jQuery. 那是普通的JS,但在jQuery中却是相同的东西(名称不同)。
The actual problem is that you were adding a jQuery element list ( $('.accordion')
) to a string (the class). 实际的问题是您要向字符串(类)添加jQuery元素列表(
$('.accordion')
)。 That doesn't make sense. 那没有道理。 To fix the problem changing your code as little as possible, make it:
要解决尽可能少更改代码的问题,请执行以下操作:
var element = $('.accordion');
element.css('height', 10);
$('.accordion.beginning-transition').css('height', 100);
$('.accordion.middle-transition').css('height', 200);
When in doubt, debug with your console. 如有疑问,请使用控制台进行调试。
You're trying to concatenate a selector string to element
which is a jQuery object. 您正在尝试将选择器字符串连接到jQuery对象的
element
。 That's not going to work, since jQuery objects aren't converted to their selector strings when converted into strings, so you'll just get a nonsensical selector string as a result. 这是行不通的,因为jQuery对象在转换为字符串时不会转换为其选择器字符串,因此您只会得到一个荒谬的选择器字符串。
If you need to save the original selector string for later use you need to save it separately: 如果需要保存原始选择器字符串以供以后使用,则需要单独保存它:
var selector = '.accordion';
// Or var element = $(selector); element.css(...); if you need the element var too
$(selector).css('height', 10);
$(selector + '.beginning-transition').css('height', 100);
$(selector + '.middle-transition').css('height', 200);
JQUERY $(".accordion").click(function(){ JQUERY $(“。accordion”)。click(function(){
setTimeout(function () {$(".accordion").addClass("BT")}, 1000);
setTimeout(function () {$(".accordion").addClass("MT")}, 2000);
setTimeout(function () {$(".accordion").removeClass("BT")}, 3000);
setTimeout(function () {$(".accordion").removeClass("MT")}, 3000);
});
CSS 的CSS
.accordion {
width: 399px;
height:100px;
background: black;
}
.BT {
height:200px;
}
.MT {
height: 300px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.