更新

Question

我目前有这个，它工作正常，但我想有一个更好的方式来做同样的事情，可能有一个单一的功能，而不是2个独特的功能，并保存线。只是比这么多线条更优雅的方式。以下两个功能看起来相似，但它们的功能略有不同，如您所见。任何人？感谢

$("#container").on({
"mouseenter": function () {
    $(this).stop().animate({
        "opacity": "1"
    }, 400);
    $(this).prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
},
"mouseleave": function () {
    $(this).stop().animate({
        "opacity": "0.3"
    }, 400);
    $(this).prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
}
}, "img");

$("#container").on({
"mouseenter": function () {
    $(this).stop().animate({
        "opacity": "0.3"
    }, 400);
},
"mouseleave": function () {
    $(this).stop().animate({
        "opacity": "1"
    }, 400);
}
}, ".gallery a img");

Answer 1

您可以使用逗号,或add()功能指定多个选择器：

$("#container, #container2, #container3")

更新

$("#container, #container2, #container3").on({
"mouseenter": function (e) {
   var id = e.target.id;
   if (id === 'container') {
     // code for #container
   }
   else if (id === 'container2') {
     // code for #container2
   }
   else if (id === 'container3') {
     // code for #container3
   }
},
"mouseleave": function (e) {
   var id = e.target.id;
   if (id === 'container') {
     // code for #container
   }
   else if (id === 'container2') {
     // code for #container2
   }
   else if (id === 'container3') {
     // code for #container3
   }
}
}, "img");

Answer 2

您可以尝试创建一些常规函数来处理大多数这些事件。

例如：

function someEvent(container, opacity) 
{
    $(container).stop().animate({
        "opacity": opacity
    }, 400);
}


$("#container").on({
   "mouseenter": someFunction($(this), '0.3');
  },
   "mouseleave": someFunction($(this), '1');
  }
}, ".gallery a img");

Answer 3

你可以将公共代码拉出两个函数，'brighten'和'dim'

brighten = function(container,hasCaption) {
    container.stop().animate({opacity:1},400);
    if(hasCaption) {
        container.prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
    }
}

dim = function(container,hasCaption) {
    container.stop().animate({opacity:0.3},400);
    if(hasCaption) {
        container.prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
    }
}

然后你的事件绑定看起来像：

$("#container").on({
    "mouseenter": function () { brighten($(this),true); },
    "mouseleave": function () { dim($(this),true); }
}, "img");

$("#container").on({
    "mouseenter": function () { dim($(this)); },
    "mouseleave": function () { brighten($(this)); }
}, ".gallery a img");

Answer 4

这应该对你有所帮助每个元素都有不同的不透明度，因此如果您必须为每个元素设置if，则会出现问题，因此最好的方法是使用jQuery.data()存储它。

JS

jQuery('#container1').data('opacity', {'enter': 0.1, 'leave': 1});
jQuery('#container2').data('opacity', {'enter': 0, 'leave': 0.1});

jQuery('#container1, #container2').on({
    "mouseenter": function() {
        var $element = jQuery(this);
        $element.stop().animate({
            "opacity": $element.data('opacity').enter;
        }, 400);
        if($element.is('#container1')) {
            $element.prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
        }
    },
    "mouseleave": function() {
        var $element = jQuery(this);
        $element.stop().animate({
            "opacity": $element.data('opacity').leave;
        }, 400);
        if($element.is('#container1')) {
            $element.prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
        }
    }
}, "img");

Answer 5

未测试：无论如何，最好将代码保存在命名空间中，只需从事件中调用各自的函数。

$("#container").on({
"mouseenter": function () {
    var galleryImg = $(this).parents('.gallery').length >=1;
    $(this).stop().animate({
        "opacity": galleryImg? 0.3 : 1
    }, 400);
    if(!gallerImg)$(this).prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
},
"mouseleave": function () {
   var galleryImg = $(this).parents('.gallery').length >=1;
    $(this).stop().animate({
        "opacity": galleryImg? 1 : 0.3
    }, 400);
    if(!gallerImg)$(this).prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
}
}, "img");

Answer 6

其他一些答案可能更优雅，但如果您只想减少行数并减少重复，可以将其分解为可重复使用的函数并将其调用两次：

function imageMouseover(selector, filterSelector, mouseEnterOpacity, mouseLeaveOpacity, fadeCaption) {
    $(selector).on({
        "mouseenter": function () {
            $(this).stop().animate({
                "opacity": mouseEnterOpacity
            }, 400);
            if (fadeCaption) {
                $(this).prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
            }
        },
        "mouseleave": function () {
            $(this).stop().animate({
                "opacity": mouseLeaveOpacity
            }, 400);
            if (fadeCaption) {
                $(this).prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
            }
        }
    }, filterSelector);
}

你可以两次调用它来指定正在改变的东西：

imageMouseover("#container", "img", "1", "0.3", true);
imageMouseover("#container", ".gallery a img", "0.3", "1", false);

如何组合2个单击事件功能

6 个答案:

更新