26

現在、ユーザーが特定の要素の上にマウスを置いたときに css クラス 'ui-state-hovered' を切り替える jQuery/Javascript コードがいくつかあり、konacha でテストを記述してこのコードをテストしたいと考えています。

jQuery を使用して Javascript でこの関数を記述するにはどうすればよいですか?

ユーザーが要素 $('.someClass li:first') にカーソルを合わせたときに、クラス 'ui-state-hovered' が存在する場合は true を返します。それ以外の場合は false を返します。

その要素の上にマウスを置いているユーザーをどのようにシミュレートしますか?

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

省略形の set 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");
  }

イベントマウスリーブを設定

$(".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 に答える
-3

ホバー時に関数を書く

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