Javascritpt将班级改为靠近他的祖父的一个div

Question

我希望在此代码中动态地将元素#sidePanel的类从.compact更改为.expanded：

<div id="sidePanel" class="compact"></div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button"></div>
    </div>
</div>

我被困在这里，我无法将该课程应用到正确的<div>，我可以将该课程添加到顶部栏中：

$(document).ready(function(){
    $("#button").mouseover(function(){
    $("this").parent().eq(2).addClass(".expanded").removeClass(".compact");
    });
});

我也试过这个：

$(document).ready(function(){
    $("#button").mouseover(function(){
    $("#sidepanel").addClass(".expanded").removeClass(".compact");
    });
});

Answer 1

你的第二个例子非常接近。当您$.addClass()和$.removeClass()或者指的是使用选择器定位某些内容之外的类名时，只需引用类名（不需要前导.）。此外，JS（和CSS）区分大小写，因此$('#sidepanel')不会定位#sidePanel - 案例需要匹配。

    $("#button").mouseover(function() {
      $("#sidePanel").addClass("expanded").removeClass("compact");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button">button</div>
    </div>
</div>

在第一个示例中，$(this)是您在jQuery中引用this的方式。如果您将this放在引号中，则会将单词this视为字符串文字。由于要使用$.parent()，您需要上升2个级别，您应该使用$.parents()和您要定位的父级ID，然后使用$.prev()选择前一个元素，这是#sidePanel。所以要像那样遍历DOM，我就是这样做的。

$("#button").mouseover(function() {
      $(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button">button</div>
    </div>
</div>

Answer 2

您的问题是您使用的是$("#sidepanel")而不是$("#sidePanel")

以下是更改后的工作示例：

$(document).ready(function(){
    $("#button").on('mouseover', function(){
       $("#sidePanel").addClass("expanded").removeClass("compact");
    });
});

#topbar > div {
  width: 100px;
  height: 30px;
  background: #ccc;
  margin-top: 20px;
}

#sidePanel {
  width: 100%;
  height: 40px;
  background: #ccc;
}

#sidePanel.expanded {
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
    <div id="buttonContainer"></div>
    <div id="button"></div>
</div>

Answer 3

首先：解决方案

$(document).ready(function()
{
    $("#button").mouseover(function()
    {
         // class names - without the dot
         $("#sidepanel").addClass("expanded").removeClass("compact");
    });
});

然后：为什么你第一次尝试真的很接近

$(document).ready(function()
{
    $("#button").mouseover(function()
    {
        // $(this) selector uses the `this` keyword (not as a string)
        $(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
    });
});