Javascript jQuery单击事件似乎有点晚了

我在Facebook的反应栏上工作，所以很难在这里复制代码，因为它绑定了很多事件，但你们都有Facebook，所以如果你想自己检查，请做

问题是，我设法将反应条移动到react根下，现在我想让单击的反应计数器将其自身的背景颜色更改为绿色

除一件事外，一切都很顺利：只需点击一下鼠标。为了让你们更好地理解，我记录了一个小例子，看看它是什么样子。单击时会出现红色脉冲环：

以下是更改代码：

$(this).find('div._iu-[role="toolbar"]').bind('click',function(){
                $(this).find('p.counter').each(function(){$(this).css('background-color','#48649F');});
                $(this).find('span[aria-pressed="true"]').find('p.counter').css('background-color','green');
            });

$（这个）

是

div[id*=“post”]

所以在

$（这个）

中，我得到了整个帖子的div

我想也许我应该在将每个计数器都更改为默认颜色函数后使用回调函数，但我不知道我是否正确，以及这是否是正确的解决方案

---

感谢上苍。（：

从jQuery1.7开始，他们引入了.on（'click'，函数（）..方法。尝试一下，看看是否得到相同的结果。

您可能可以将其简化一点。虽然没有html结构，但我无法确定函数的布局相对于事件源是如何工作的。此外，我也不确定何时将aria pressed设置为true，因此我将函数设置为更通用的。您简单吗只需添加一个数据属性，即可将鼠标单击所需的范围作为目标

<div class="_lu-" role="toolbar" data-target=".facebook-counter">

此代码首先假设您的跨度在同一个容器中，第二个假设第一个

$（This）

引用整个工具栏的父容器，最后假设您已将

data target=“”

属性与要影响的相应目标的选择器放在一起

这是一个示例：

$（文档）.ready（函数（）{
$（'.toolbar'）。打开（'单击'，'.toolbar项.icon'，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
如果（！this.$）this.$=$（this）；
如果（！this.parent）this.parent=this.$.parent（）；
如果（！this.counter）this.counter=this.$.sides（'.counter'）；
this.parent.addClass（'selected'）。同胞（'.selected'）。removeClass（'selected'）；
var count=this.counter.data（'value'）；
计数++；
此.counter.data（'值'，计数）；
this.counter.html（count）；
});
})；

工具栏{
字号：0；
文本对齐：居中；
}
.工具栏项.图标{
背景：#FFF；
填充：30px；
边框：1px实心#AAA；
边界半径：100%；
利润率：0.20%；
过渡：0.8s缓解所有；
}
.已选定。图标{
背景:#369；
}
.工具栏项.计数器{
背景：#e0；
利润率：0.10px；
过渡：0.4s轻松背景；
}
.已选定。计数器{
背景：#509050；
}
.工具栏项{
字号：10pt；
宽度：25%；
显示：内联块；
}

喜欢
0
哇！
0
悲哀的
0
发怒的
0

在没有测试或没有时间测试代码的情况下快速回答。我最近遇到了一个嵌套函数的性能问题，所以可以使用.each（）方法查看第二行。

这一切取决于何时按下

将
设置为“true”
。我确信您是对的，但是：正如您所看到的，单击图标时，aria按下会更改，没有任何变化，只有在第二次单击后才会更改。然后，单击事件后，
aria按下
会更新。它只会使用
aria按下=“true”更改元素子元素的颜色
。因此，
aria pressed
在您的单击事件发生时尚未更新到最新的元素。Jquery的版本在这里一点问题都没有。-1
。on
是首选方法，但
。bind
仍按预期工作。
var $t = $(this);
var $t.target = $(this).data('target');
$t.on('click','div._lu-[role="toolbar"]', function() {
   $t.find($t.target).css({
      'background-color':'green'
   }).siblings().css({'background-color','#48649F'});
});