javascript - Jquery Noobish 帮助 : Img OnClick

Question

我是 JQuery 的新手，我在理解如何执行此操作时遇到了一些困难:

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

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

或:

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

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

提前致谢!

更新:我忘了添加一个细节:是否有可能以某种方式使“imgeexpander”类图像的点击只影响所有包含在一个大 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";
  }
);

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

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

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

编辑:已更新获取 div.expand 元素的方法以反射(reflect)对 OP 的更改。单击 img 时，只有属于父 bigdiv 类 DIV 的子元素的 DIV 元素才会切换。

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