Question

我想制作一个Javascript函数，在其中读取所选元素的类并添加类active。如何获取函数所在的HTML元素的类？

我试图用document.getElementsByClassName(class)来创建Javascript函数，但这是行不通的。

function menuicon(){
  var className = $('div').attr('class');
  className.$(className).addClass("active");
}

<section class="menubar">
  <div class="menuicon" onclick="classAdd()">
    <span></span>
    <span></span>
    <span></span>
  </div>
</section>

<section class="home">
  <button class="hbutton" onclick="classAdd()"></button>
</section>

我希望Javascript函数能够读取该函数所在的HTML元素的类。

Answer 1

您需要将元素传递给函数：

onclick="classAdd(this)"

然后在函数中，只需使用.addClass，而无需使用className。

function classAdd(element) {
    $(element).addClass("active");
}

Answer 2

此代码段仅在div的classList中包含“ active”

var classAdd = function() {
                  var menuIcon = document.querySelector('div.menuicon');
                      menuIcon.addEventListener('click',() => {
                                                    menuIcon.classList.add('active');
                                                 });
                          }

Answer 3

如果需要，您可以坚持使用div和menuicon类。下面的代码将很适合您。

function classAdd() {
    $("div.menuicon").attr("class", "menuicon active");
}

如何使用jQuery或Javascript获得类名

3 个答案: