Question

我试图了解jquery切换的工作原理。我想点击带有plr-anchor类的图片，切换到下一个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

你的jQuery代码有一个“＃”而不是“$”。顺便说一下，React和jQuery并不总是在一起。 React的全部目的是使用虚拟dom并让React处理dom更新。虽然jQuery主要是关于直接dom操作。你在这里尝试的东西会干扰React，因为如果不改变v-dom，它就不会期望dom会改变。

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

Answer 2

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

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

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

Jquery点击图片切换

2 个答案: