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

那是vanilla 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

您正在尝试将选择器字符串连接到element这是一个jQuery对象。这不起作用，因为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 $（＆＃34; .accordion＆＃34）。单击（函数（）{

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

使用jQuery设置html类CSS

3 个答案: