Jquery Noobish帮助：Img OnClick

我是JQuery的新手，我在理解如何执行此操作时遇到了一些麻烦：

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

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

要么：

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

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

提前致谢！

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

• 大div
  • onclick的图像
  • 需要受影响的div
• 另一个大的div
  • onclick的图像
  • 需要受影响的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元素设置单击事件处理程序。 处理程序切换类expand的所有DIV元素的可见性。 通过测试“div.expand”匹配的任何DIV元素是否可见来更新图像的src属性。

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

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

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

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