如何將CSS和javascript轉換為類

Question

我有一些問題將CSS ID轉換為類和javascript以匹配它。 我需要在網站上多次使用該腳本

這里是我的代碼：CSS：

#first {
    background-color: #FFF;
    width: auto;
    height: auto;
    overflow: hidden;
    padding: 10px;
} 

JavaScript的：

var divh = document.getElementById('first').offsetHeight;

//keep default height
var divh = $("#first").outerHeight();

document.getElementById("first").style.height = "100px";

//toggle functions
$('div:first').toggle(
  function () {
     $("#first").stop().animate({
        height: divh +'px'
     }, 1000);
  },
  function () {
    $("#first").stop().animate({
      height: '100px'
    }, 1000);
  }
)

Answer 1

如果我理解正確你可以這樣做：

.first {
    background-color: #FFF;
    width: auto;
    height: auto;
    overflow: hidden;
    padding: 10px;
}

而Javascript將是這樣的：

var divh = $('.first').offsetHeight;

//keep default height
var divh = $(".first").outerHeight();

$('.first').style.height = "100px";

//toggle functions
$('div:first').toggle(
  function () {
     $(".first").stop().animate({
        height: divh +'px'
     }, 1000);
  },
  function () {
    $(".first").stop().animate({
      height: '100px'
    }, 1000);
  }
)

只需使用jQuery選擇器來選擇類而不是ID。

Answer 2

我認為你可以使用“ 類選擇器 ”來獲取屬於該類的所有元素，然后通過使用each函數將動畫應用於所有元素或逐個應用（參見此處 ）。 就像是：

CSS

.first {
background-color: #FFF;
width: auto;
height: auto;
overflow: hidden;
padding: 10px;
} 

JavaScript的：

$('.first').each(function () {
    var divh = $(this).outerHeight();
    ecc. ecc.
})

Answer 3

使用#first。 首先瞬間

Answer 4

馬克的答案幾乎完全正確。

雖然，他將$（'div：first'）更改為$（'div.first'）並不是同一回事。

：首先是jQuery選擇器的一部分，只選擇第一個匹配的元素（見這里 ）。

所以，如果你想選擇第一個div，請使用$（'div：first'）。 如果要選擇具有“first”類的所有div，請使用$（'div.first'）。