Question

我正在开发一个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)我在整个帖子中得到了div。

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

感谢上述。（：

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>

Answer 2

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

Answer 3

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

jQuery点击事件似乎有点迟了

3 个答案: