Jquery Noobish 帮助：Img OnClick

Question

我对 JQuery 很陌生，但我在理解如何做到这一点时遇到了一些麻烦：

我有一个“imgexpander”类的图像，其 src 属性设置为“img1.png”。单击图像时，它应该查看具有“扩展”类的 div 当前是隐藏还是可见。

• 如果它是隐藏的（这是默认设置），它会显示它（我知道如何使用 show()）并将图像的 src 属性更改为“img2.png”。

或：

• 如果 div 可见，则将其隐藏并将图像的 src 属性更改为“img1.png”。

我还不熟悉 JQuery 中的可用函数。这怎么可能实现？你能给我一些我可以使用的示例代码吗？

提前致谢！

更新：我忘了添加一个细节：是否有可能以某种方式使“imgexpander”类图像的 onclick 只影响所有包含在一个大 div 中的 div？因此，层次结构类似于：

• 大 div
  • 点击图片
  • 需要影响的div
• 另一个大 div
  • 点击图片
  • 需要影响的div

期望的结果是让每个“带有 onclick 的图像”仅影响其各自“大 div”内的“需要影响的 div”。这可能吗？我不确定当前的答案是否合适，但谢谢！

Answer 1

怎么样：

$("img.imgexpander").click
(
  function()
  {        
    var expandableDIVs = $(this)
                           .parents("div.bigdiv:first")
                           .find("div.expand");    
    expandableDIVs.toggle();
    this.src = expandableDIVs.is(":visible") ? "img2.png" : "img1.png";
  }
);

此代码为 imgexpander 类的所有 IMG 元素设置一个单击事件处理程序。处理程序切换类扩展的所有 DIV 元素的可见性。图片的 src 属性通过测试是否有任何与“div.expand”匹配的 DIV 元素可见来更新。

请注意，我可以将匹配“div.expand”选择器的 jQuery 包装 DIV 集分配给 JavaScript 变量以供以后使用。

事件处理程序中的this 关键字指的是由“img.imgexpander”选择器匹配的当前DOM 元素。请记住，此表达式可以匹配多个元素。

编辑：获取 div.expand 元素的方法已更新，以反映对 OP 的更改。单击 img 时，只会切换作为父 bigdiv 类 DIV 的子级的 DIV 元素。

请注意，已注意忽略元素的标记方式。对我们来说重要的是 IMG 元素在其 bigdiv 类的父链的某处有一个父 DIV，但该元素不必是直接父级。这就是我使用:first 伪选择器的原因。