如何从基于类的组选择中定位特定的、当前处于活动状态的元素

Question

我正在尝试学习 jQuery，我阅读的所有内容都很有意义，但后来我尝试做一些简单的事情，但它失败了。好的，所以我有一个基本的图片库，四行四列，当他们将光标移到图片上时，我希望能够交换 CSS 类。下面是我试图定位的相关 HTML（如有必要，我可以将整个文件文档放上去，它只是很长）： 具体来说，我想选择所有带有 galImg 类的图像并附加一个悬停事件处理程序，从那个处理程序中，我想换掉 CSS 类。这是我使用的 jQuery：

$(document).ready(function(){
$(".galImg").hover(function(){
    $(this, 'img').removeClass(".img-thumbnail");
    $(this,'img').removeClass(".galImg").addClass(".pictureFocus");
         });
});

我知道我可以通过从 HTML 文档中的每个图像条目中粘贴一堆 onClick="functionName()" 来调用事件处理程序，但这似乎是多余的，因此我正在对我在另一篇文章中看到的内容进行建模在这方面与此非常相似。就我所见（我可能看不到）而言，问题出在哪里，一旦我有了选择，我就很难理解如何指定鼠标悬停的特定元素.如果 $(".galImg").hover 是选择，（我认为这是'所有具有类 .galImg 的图像都处于悬停状态'），那么在附加到它的函数中，如何我指的是用户将鼠标悬停的特定img？我真的很感激有人花时间帮助我。这是我第一天真诚地尝试用我在 JavaScript 中阅读的东西做任何事情，我感到非常沮丧。再次感谢您的宝贵时间。

<div class="row coniferGal">
            <div class="col-lg-3">
                <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
                
            </div>
            <div class="col-lg-3">
                <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
                
            </div>
            <div class="col-lg-3">
                <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
                
            </div>
            <div class="col-lg-3">
                <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">

Answer 1

您的代码中存在一些问题。最主要的是 jQuery 对象中的第二个参数是上下文。这实际上与find() 相同。因此，您正在this 中包含的img 中寻找img - 这就是它不起作用的原因。删除第二个参数。

其次，不要从元素中删除.galImg 类。您由此选择了img。如果您希望它对您选择的元素产生影响，那么您需要一个委托事件处理程序，但我不会在这里讨论，因为在第一个实例中删除 .galImg 类是没有意义的。

第三，addClass()、removeClass()、toggleClass() 等方法不需要类上的. 前缀。您只需将它们作为字符串提供，必要时用空格分隔。

最后，您可以单独使用 toggleClass() 来组合单独的 addClass() 和 removeClass() 调用。

为了将来的参考，你应该注意 jQuery 有excellent documentation。我建议您浏览它以熟悉可用的方法 - 其中大多数都是不言自明的。

说了这么多，试试这个：

$(document).ready(function() {
  $(".galImg").hover(function() {
    $(this).toggleClass("img-thumbnail pictureFocus");
  });
});

.galImg { 
  width: 75px;
  height: 75px;
  border: 1px solid #000;
  display: block;
}

.pictureFocus {
  background-color: #CCC;
  border-color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row coniferGal">
  <div class="col-lg-3">
    <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
  </div>
  <div class="col-lg-3">
    <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
  </div>
  <div class="col-lg-3">
    <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
  </div>
  <div class="col-lg-3">
    <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
  </div>
</div>

然而值得注意的是，您展示的示例不需要 JS/jQuery。在这种情况下，更好的做法是单独使用 CSS 来更新元素的悬停状态。这是因为 CSS 比 JS 具有更好的性能，并且还因为 JS 不应该只用于更新 UI，如果可能的话。

这是与上面相同的演示，但仅使用 CSS 构建：

.galImg { 
  width: 75px;
  height: 75px;
  border: 1px solid #000;
  display: block;
}

.galImg:hover {
  background-color: #CCC;
  border-color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row coniferGal">
  <div class="col-lg-3">
    <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
  </div>
  <div class="col-lg-3">
    <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
  </div>
  <div class="col-lg-3">
    <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
  </div>
  <div class="col-lg-3">
    <img src="images/images/Gallery_03.jpg" alt="Chinese Maple" class="galImg img-thumbnail">
  </div>
</div>