Question

我正在使用jQuery根据悬停时与之关联的类来更改按钮的背景图像。但是，只有当我将悬停语句放在单独的函数中时，它才有效。为什么是这样？

这是非工作代码，总是求值为.submit hover语句，即使通过keyup事件删除了该类。

    $(function() {
    {

$('.submit-getinfo').hover(function ()
{
    $(this).css( {backgroundPosition: "right bottom"} );
}, function() {
    $(this).css( {backgroundPosition: "right top"} );
    //$(this).removeClass('submithover');

});

$('.submit').hover(function ()
{
    $(this).css( {backgroundPosition: "left bottom"} );
}, function() {
    $(this).css( {backgroundPosition: "left top"} );
    //$(this).removeClass('submithover');

});

    }});

工作代码：

    $(function() {
    {


$('.submit').hover(function ()
{
    $(this).css( {backgroundPosition: "left bottom"} );
}, function() {
    $(this).css( {backgroundPosition: "left top"} );
    //$(this).removeClass('submithover');

});
    }});

    $('#test').bind('keyup', function() { 

    if (url == 'devel') {
    $("#submit").addClass("submit-getinfo").removeClass("submit");

$('.submit-getinfo').hover(function ()
{
    $(this).css( {backgroundPosition: "right bottom"} );
}, function() {
    $(this).css( {backgroundPosition: "right top"} );
//$(this).removeClass('submithover');

});
    } } );

我只是不明白为什么我必须将悬停语句放在单独的函数中，而不是将它们都放在主DOM中。

Answer 1

您需要使用.live()重新排列代码，如下所示：

$(function() {
  $('.submit-getinfo').live('mouseenter', function () {
      $(this).css( {backgroundPosition: "right bottom"} );
  }).live('mouseleave' function() {
      $(this).css( {backgroundPosition: "right top"} );
  });

  $('.submit').live('mouseenter', function () {
      $(this).css( {backgroundPosition: "left bottom"} );
  }).live('mouseleave', function() {
      $(this).css( {backgroundPosition: "left top"} );
  });
});

目前它正在说“找到具有该类的元素，将这个悬停函数绑定到那些”，现在你改变类并不重要，因为函数已经绑定到该元素了mouseenter和mouseleave jQuery事件......即使它的类更改，也是无关的。

然而，对于.live()，事件处理程序未绑定到元素本身，它绑定到document，等待mouseenter和mouseleave事件冒泡up，它评估导致事件的元素是否与选择器立即匹配，并且如果是这样则执行...所以如果你改变了类将重要，那么make感？

jQuery类选择器奇怪

1 个答案: