Jquery 点击图片切换

Question

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

Jquery代码：

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

代码片段：

{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 的新手，任何帮助都会很棒。提前致谢。

Answer 1

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

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

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

Answer 2

您的 jQuery 代码有一个“#”而不是“$”。顺便说一下，React 和 jQuery 并不总是在一起。 React 的全部目的是使用虚拟 dom 并让 React 负责 dom 更新。虽然 jQuery 主要是关于直接 dom 操纵。您在这里尝试的内容会干扰 React，因为它不会期望 dom 在 v-dom 不发生变化的情况下发生变化。

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

Jquery 点击图片切换

Jquery Toggle on click of image

html

javascript

jquery

toggle

reactjs