jQuery点击事件似乎有点晚了

jQuery click event seems to be kind of late

本文关键字：事件 jQuery      更新时间：2023-09-26

我正在开发一个Facebook反应栏，所以很难在这里复制代码，因为它绑定了很多事件，但你们所有人都有Facebook，所以如果你想自己检查它 - 请这样做。

问题是我设法将反应栏移动到反应根下，现在我想让点击的反应计数器将自己的背景颜色更改为绿色。

除了一件事之外，一切都运行良好：它落后于一次点击。为了让您更好地理解，我记录了一些例子。当我点击时出现红色脉冲环：https://vid.me/HqYp

以下是更改代码：

$(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');
            });

$(this) div[id*="post"]所以在$(this)我对整篇文章都感到震惊。

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

来自上面的感谢。(:

你可以稍微简化一下。虽然没有 html 结构，但我无法确定函数的布局如何相对于事件来源工作。 我也不确定咏叹调按下何时设置为 true，所以我使函数更加通用。您只需添加一个数据属性，即可定位您希望点击定位的范围。

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

稍后在 JavaScript 中执行以下操作

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'});
});

此代码首先假设您的跨度位于同一容器中，其次假设第一个$(this)引用整个工具栏的父容器，最后假设您已将data-target=""属性与要影响的相应目标的选择器放在一起。

这是一个示例：

$(document).ready(function(){
  $('.toolbar').on('click','.toolbar-item .icon', function(event) {
    event.preventDefault();
    event.stopPropagation();
    if(!this.$) this.$ = $(this);
    if(!this.parent) this.parent = this.$.parent();
    if(!this.counter) this.counter = this.$.siblings('.counter');
    
    this.parent.addClass('selected').siblings('.selected').removeClass('selected');
    var count = this.counter.data('value');
    count++;
    this.counter.data('value',count);
    this.counter.html(count);
  });
});
.toolbar {
  font-size:0;
  text-align:center;
}
.toolbar-item .icon {
  background:#FFF;
  padding:30px;
  border:1px solid #AAA;
  border-radius:100%;
  margin:0 20%;
  transition:0.8s ease all;
}
.selected .icon {
  background:#369;
}
.toolbar-item .counter {
  background:#E0E0E0;
  margin:0 10px;
  transition:0.4s ease background;
}
.selected .counter {
  background:#509050;
}
.toolbar-item {
  font-size:10pt;
  width:25%;
  display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolbar">
  <div class="toolbar-item">
    <div class="icon">Like</div>
    <div class="counter" data-value="0">0</div>
  </div>
  <div class="toolbar-item">
    <div class="icon">Wow</div>
    <div class="counter" data-value="0">0</div>
  </div>
  <div class="toolbar-item">
    <div class="icon">Sad</div>
    <div class="counter" data-value="0">0</div>
  </div>
  <div class="toolbar-item">
    <div class="icon">Angry</div>
    <div class="counter" data-value="0">0</div>
  </div>
</div>

从jQuery 1.7开始，他们引入了.on（'click'，function（）...。方法。试试看，看看你是否得到相同的结果。

快速回答，无需测试或测试代码的时间。 我最近遇到了嵌套函数的性能问题，所以也许可以使用 .each（） 方法查看第二行。

相关文章：