javascript - jQuery 点击事件似乎有点晚了

Question

我正在开发 Facebook react 栏，因此很难在此处复制代码，因为它绑定(bind)了很多事件，但你们所有人都有 Facebook，所以如果您想自己检查一下 - 请自己检查。

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

除一件事外，一切都运行良好:它落后了一次点击。为了让您更好地理解，我记录了一些小例子。单击时出现红色脉冲环: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) 我得到 div整个帖子。

我想也许我应该在 changing-every-counter-to-default-color 函数之后使用回调函数，但我不知道我是对的还是正确的解决方案。

感谢楼上。 (:

Answer 1

您或许可以稍微简化一下。虽然没有 html 结构，但我无法确定函数的布局如何根据事件来源工作。此外，我不确定 aria-pressed 何时设置为 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>