Jquery Noobish帮助：Img OnClick

Question

我是JQuery的新手，我在理解如何做到这一点时遇到了一些麻烦：

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

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

或

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

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

提前致谢！

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

• 大div
  • 带onclick的图片
  • 需要受影响的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伪选择器的原因。