Jquery 在单击图像时切换

Posted

技术标签:

【中文标题】Jquery 在单击图像时切换【英文标题】:Jquery Toggle on click of image 【发布时间】:2016-03-24 17:45:44 【问题描述】:

我正在尝试了解 jquery 切换的工作原理。我想在单击带有 go_down 类的图像时切换到带有 plr-anchor 类的下一个锚点。使用地图填充数据。

jQuery 代码:

$('.go_down').on('click',function(e)
    #('.plr-anchor').next('.plr-anchor').toggle());

代码sn-p:

data.map(function(categ) 
return <div>
<a className="plr-anchor" id=categ.short_name></a>
<img src="/static/img/icon_up.png" className="go_down"/>
</div>.bind(this)

Jquery 调用函数的语法似乎有问题。我是 Jquery 的新手,任何帮助都会很棒。提前致谢。

【问题讨论】:

您在此提供了一个哈希#('.plr-anchor').next('.plr-anchor').toggle());。试试$('.plr-anchor').next('.plr-anchor').toggle()); 【参考方案1】:

您的 jQuery 代码使用“#”而不是“$”。顺便说一句,React 和 jQuery 并不总是一起使用。 React 的全部目的是使用虚拟 dom 并让 React 处理 dom 更新。而 jQuery 主要是关于直接 dom 操作。您在这里尝试的操作会干扰 React,因为它不会期望 dom 在不改变 v-dom 的情况下改变。

理想情况下,您应该在组件中使用事件处理程序和状态来切换可见性。

【讨论】:

谢谢,我更新了代码以使用事件处理程序。【参考方案2】:

您在点击处理程序中使用了# 而不是$。您还需要找到确切的plr-anchor,它位于点击的图像之前。现在你正在切换所有plr-anchor

对于动态元素,使用$(document).on(event, selector, function()); 绑定点击处理程序。见下面代码

$(function()
  $(document).on('click','.go_down',function(e)
     $(this).prev('.plr-anchor').toggle();
  );
);

【讨论】:

以上是关于Jquery 在单击图像时切换的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 .load() 使用 jQuery 切换图像?

Jquery在单击按钮时更改切换开关CSS类

如何使用 jquery 在单击时切换框阴影

使用 jQuery 单击切换

JQuery - 单击切换按钮时,附加表会不断增加自身或复制自身

使用 jQuery 在切换时旋转图像