Jquery Noobish帮助：Img OnClick [英] Jquery Noobish Help: Img OnClick

问题描述

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

I'm very new to JQuery, and I'm having some trouble understanding how to do this:

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

I have an image of class "imgexpander" with the src attribute set to "img1.png". When the image is clicked on, it should look to see whether a div with class "expand" is currently hidden or visible.

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

OR：

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

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

I'm not familiar with the available functions in JQuery yet. How could this be accomplished? Can you give me some sample code that I can work with?

提前致谢！

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

UPDATE: I forgot to add a detail: is it possible to somehow make the onclick of an image of class "imgexpander" only influence divs that are all included together in one big div? So, the hierarchy would be something like:

• big div
  
  
  
  
  • onclick图片
  
  
  • 需要受影响的div
  
  
  
  
  • 带onclick的图片
  
  
  • 需要受影响的div
  
  

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

  The desired result would be to have each "image with onclick" only influence "divs that need to be influenced" inside its respective "big div". Is this possible? I'm not sure the current answer would fit, but thanks!

  推荐答案

  怎么样：

  $("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属性。

  This code sets up a click event handler for all IMG elements of class imgexpander. The handler toggles the visibility of all DIV elements of class expand. The src attribute of the image is updated by testing if any of the DIV elements matched by "div.expand" are visible.

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

  Notice that I can assign the jQuery wrapped set of DIVs matching the "div.expand" selector to a JavaScript variable for later use.

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

  The this keyword in the event handler refers to the current DOM element matched by the "img.imgexpander" selector. Remember, there can be several elements matched by this expression.

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

  EDIT: The method of acquiring the div.expand elements has been updated to reflect the changes to the OP. Only DIV elements that are children of the parent bigdiv classed DIV will be toggled when an img is clicked.

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

  Note that care has been taken to ignore the way that elements are marked up. It is important to us that the IMG element has a parent DIV somewhere in its parent chain of class bigdiv, but this element does not have to be an immediate parent. This is the reason for my use of the :first pseudo-selector.

  这篇关于Jquery Noobish帮助：Img OnClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！