在Div中的多次单击事件中，以一次单击的形式返回

Question

我有点为难。我有多张卡片..。与几次点击事件可能(7)是准确的内部每张卡。

我用返回不同值的数据标记向它们添加了相同的类(每次单击事件)。

基本上，我想跟踪所有的点击事件(7)在不同的时间，并检查他们作为一个每张卡。

如果用户在卡内做了任何事情，将其算为一个事件。我基本上是在计算每张卡的浏览量。

现在我有这样的事情

 $(document).on("click", ".test", function() {
    console.log('Testing Stats View capture');
    var that = $(this);
    var testStats = that.data('capture-stats');
    console.log(testStats);   
 }));

Answer 1

每张卡的

计数视图

您可以使用this.data()将计数存储在每张卡上。

​

 $(document).on("click", ".card", function() {
 
     var clickcount = $(this).data("clickcount") || 0;
     clickcount++;
     $(this).data("clickcount", clickcount);
     
     console.log($(this).text() + " clicked: " + clickcount); 
     
 });

.card { cursor: pointer; user-select: none;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='card'>card 1</div>
<div class='card'>card 2</div>
<div class='card'>card 3</div>

​

Answer 2

您可以将数据属性添加到触发事件的元素，在处理程序的末尾，并在开始时检查它的存在，作为执行给定逻辑的条件：

​

 $(document).on("click", ".test", function() {
    console.log('Testing Stats View capture');
    var that = $(this);
 
    //if the prop data-event-triggered is not set yet for this element
    if ( !that.data('event-triggered') ){
      var testStats = that.data('capture-stats');
      //adds the prop data-event-triggered for this element
      that.data('event-triggered','true');
      console.log('event triggered-${testStats}');   
    }    
 });

.test {
  width: 100px;
  height: 100px;
  background: gray;
  cursor: pointer;
  margin-bottom:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test" data-capture-stats="1">1</div>

<div class="test" data-capture-stats="2">2</div>

​