使用jQuery设置HTML类CSS

Question

所以我有一个元素

<div class="accordion">hello</div>

当事件发生时（单击按钮），将添加几个类并将其删除到上面找到的元素中。

第一阶段添加类的beginning-transition

<div class="accordion beginning-transition">hello</div>

第二阶段添加middle-transition类，并删除beginning-transition类。

<div class="accordion middle-transition">hello</div>

最后阶段去除middle-transition阶层

<div class="accordion">hello</div>

在此按钮单击事件期间，我运行一个确定div高度的公式。

var element = $('.accordion');
element.css('height', 10);
$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);

问题在于，当将两个类别的beginning-transition和middle-transition添加到该类时，CSS高度不会从10px更改。

下面的行：

element.css('height', 10);

似乎要覆盖这两个CSS规则：

$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);

我怎样才能解决这个问题？

Answer 1

var element = $('.accordion');
element.css('height', 10);
$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);

因此，您要分配一个高度…然后分配一个替代值？ 只做一次。

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';
}

那是普通的JS，但在jQuery中却是相同的东西（名称不同）。

实际的问题是您要向字符串（类）添加jQuery元素列表（ $('.accordion') ）。 那没有道理。 要解决尽可能少更改代码的问题，请执行以下操作：

var element = $('.accordion');
element.css('height', 10);
$('.accordion.beginning-transition').css('height', 100);
$('.accordion.middle-transition').css('height', 200);

如有疑问，请使用控制台进行调试。

Answer 2

您正在尝试将选择器字符串连接到jQuery对象的element 。 这是行不通的，因为jQuery对象在转换为字符串时不会转换为其选择器字符串，因此您只会得到一个荒谬的选择器字符串。

如果需要保存原始选择器字符串以供以后使用，则需要单独保存它：

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);

Answer 3

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

.accordion {
width: 399px;
height:100px;
background: black;  
}

.BT {

height:200px;
}

.MT {
height: 300px;
}