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

Question

我正在努力学习 jQuery，我阅读的所有内容都非常有道理，但后来我尝试做一些简单的事情，但失败了。好的，我有一个基本的图片库，四行四列，我希望能够在他们将光标移到图片上时换出 CSS classes。下面是我试图定位的相关 HTML（如果需要，我可以把整个文件文档放上去，它太长了）：具体来说，我想 select 所有带有 [=23 的图像=] galImg 并附加一个悬停事件处理程序，我想从该处理程序换出 CSS classes。这是我为此使用的 jQuery：

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

我知道我可以通过从 HTML 文档中的每个图像条目中粘贴一堆 onClick="functionName()" 来调用事件处理程序，但这似乎是多余的，所以我正在建模我在另一个 post 上看到的与这个非常相似。据我所知（我可能看不到），问题出在哪里，一旦我有了 selection ，我就很难理解如何指定特定的元素鼠标悬停在上面。如果 $(".galImg").hover 是 selection，（我认为是 'all images with class .galImg that are placed in a hover state'），那么在附加到它的函数中，我将如何引用特定的用户将鼠标悬停在 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 class。你 select 编辑了 img。如果您希望它对您 select 的元素产生影响，那么您需要一个委托事件处理程序，但我不会在这里深入讨论，因为没有必要删除 .galImg class一审。

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

最后，您可以单独使用 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>

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

How to target a specific, currently active, element out of a group selection based on class

javascript

jquery

class

this