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