如何将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'）。