26

目前，我有一些 jQuery/Javascript 代码可以在用户将鼠标悬停在某些元素上时切换 css 类“ui-state-hovered”，我想在 konacha 中编写一个测试来测试这段代码。

我将如何在 jQuery 的帮助下用 Javascript 编写这个函数？

如果用户将鼠标悬停在元素 $('.someClass li:first') 上，则返回 true，类 'ui-state-hovered' 存在。否则返回假。

我将如何模拟用户将鼠标悬停在该元素上？

4

5 回答 5

27

尝试mouseenter并mouseleave

$('.someClass li:first').mouseenter().mouseleave();

来自 jQuery 文档

调用$(selector).hover(handlerIn, handlerOut)是以下的简写：$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

演示：http: //jsfiddle.net/skram/wh5N9/

尝试在下面检查将在悬停中添加的类

$("#test").mouseenter(function() {
    console.log('Has class hover ' + $(this).hasClass('ui-state-hovered'));
}).mouseleave(function() {
    console.log('Has class hover ' + $(this).hasClass('ui-state-hovered'));
})

确保以上内容注册后.hover

演示：http: //jsfiddle.net/skram/wh5N9/2/

于 2012-06-14T17:58:42.213 回答
6

简写设置 mouseenter/mouseleave 事件

$(".someClass li:first").hover(
  // Mouse Over
  function(){
    $(this).addClass("ui-state-hovered");
  },
  // Mouse Out
  function(){
    $(this).removeClass("ui-state-hovered");
});

编辑

设置事件 mouseenter

$(".someClass li:first").mouseenter(function(){
    $(this).addClass("ui-state-hovered");
  }

设置事件 mouseleave

$(".someClass li:first").mouseleave(function(){
    $(this).removeClass("ui-state-hovered");
});

模拟鼠标悬停：

$(".someClass li:first").trigger("mouseenter");

模拟鼠标移出：

$(".someClass li:first").trigger("mouseleave");

要检查一个类：

$(".someClass li:first").hasClass("ui-state-hovered");

如果有一个类，则返回 true：

function checkClass(elem, class){
  return $(elem).hasClass(class);
};

编辑 2

我以前从未使用过 Konacha，但如果我使用 solitr.com 上的本指南作为我的指南来尝试一下，我会说：

HTML

<div id="testDiv" class="foo">Some Text</div>

jQuery

checkClass = function(elem, class){
    return $(elem).hasClass(class);
};

科纳查

describe('checkClass', function() {
    it('should be true if elem has class', function() {
        checkClass("#testDiv", "foo").should.be.true;
        checkClass("#testDiv", "bar").should.be.false;
    });
});
于 2012-06-14T18:04:31.820 回答
5

看这里

$('someClass li:first').mouseover();

这应该触发事件

于 2012-06-14T17:56:55.647 回答
0

使用控制台，您可以尝试 $('#yourelement').trigger('mouseover');

于 2018-03-28T16:18:16.733 回答
-3

悬停时写函数

$('.someClass li:first').hover(function(){
      return $(this).attr('class').indexOf('ui-state-hovered') > -1;
});
于 2012-06-14T18:07:29.087 回答