Question

我是JavaScript新手。我想要计算鼠标悬停在某个单词上的次数。我尝试了这里显示的代码 - jquery count hover event - 但显然我做的不对。

例如：

<div>
<p>The quick <a class="link1" style="color:#ff0000;">brown</a> fox
   jumps over the <a class="link2" style="color:#ff0000;">lazy</a> 
   <a class="link3" style="color:#ff0000;">dog</a>.</p>
</div>

JavaScript的：

jquery('.link1').mouseover(function(){
    var $this = $(this);
    var count = parseInt($this.data('count'), 10) + 1;
    $this.data('count', count);
});

我用link2和link3为“懒惰”和“狗”重复此操作，但它不起作用。有人可以帮忙吗？

Answer 1

这是因为您使用的是jquery而不是jQuery或$。

请注意，Q是有效的

Answer 2

您需要修复的问题：

确保您使用jQuery或$
确保你在jQuery加载函数（或实际上会被调用的某个地方）中连接你的偶数
确保初始化数据计数或，以便在第一次检查时检查是否为undefined。
您可以将所有选择器与逗号

我修复了这些并粘贴了以下结果：

JSFiddle： http://jsfiddle.net/85MSt/1/

<强> HTML

<p>The quick <a class="link1" data-count="0">brown</a> fox jumps over the <a class="link2" data-count="0">lazy</a>
    <a class="link3" data-count="0">dog</a>.
</p>

<强>的Javascript

$(function () {
    $('.link1, .link2, .link3').mouseover(function(){
      var $this = $(this);
      var count = parseInt($this.data('count'), 10) + 1;
      $this.data('count', count);
    });
});

祝你好运！

Answer 3

问题是，你的锚元素没有任何data-count，这会在悬停时导致错误。添加该属性，它将正常工作。

<div>
    <p>The quick <a class="link1" data-count="0" style="color:#ff0000;">brown</a> fox jumps over the <a class="link2" data-count="0" style="color:#ff0000;">lazy</a> 
        <a class="link3" data-count="0" style="color:#ff0000;">dog</a>.</p>
</div>

<强> jquery的

$('.link1').mouseover(function () {
    var $this = $(this);
    var count = parseInt($this.data('count'), 10) + 1;
    $this.data('count', count);
    alert($this.data('count'));
});

Fiddle

使用jQuery计算悬停时间

3 个答案: