Question

我在不同的透明标签上使用mouseover和mouseleave在我的页面上交换背景图像。如果我单击其中一个标签，则退出该功能并保留鼠标悬停背景图像。 on click也将div显示设置为block，在css中设置为none。我有另一个单击功能，将背景图像设置为原始背景图像，以及重置div以显示无。我知道有一种更有效的方法来做这个，然后写这两个函数14次，但我不知道如何......

$(document).ready(function() {



   $('.tips-number-14').on({
        mouseover: function(){
            $('.tips-numbers').css('backgroundImage','url(0-HTML-Resources/imgs/buying-a-car-2/tips-numbers-hover.png)'),
            $('.tips-number-14').css('backgroundImage','url(0-HTML-Resources/imgs/buying-a-car-2/tip-14-number.png)');
        },
        mouseleave: function(){
            $('.tips-numbers').css('backgroundImage','url(0-HTML-Resources/imgs/buying-a-car-2/tips-numbers.png)'),
            $('.tips-number-14').css('backgroundImage','none');
        },
        click: function(){
            $('.tip-14-info').css('display','block'),
            $('.tips-number-14').off('mouseleave');
        },
    });
    $('.close-info-14').on({
        click: function(){
            $('.tips-numbers').css('backgroundImage','url(0-HTML-Resources/imgs/buying-a-car-2/tips-numbers.png)'),
            $('.tip-14-info').css('display','none');
        },
    }); 


});

Answer 1

我不确定我是否完成了你的问题。但在我看来，你想要为所有'14'标签拥有相同的处理程序。您可以尝试指定选择器中的所有标记（逗号分隔）：

 $('.tips-number-14, .tips-number-13, .tips-number-12, ....').on({
       // your code here
       ... 
       ...
 });

如果循环/元素的数量不断变化，您还可以使用循环生成选择器字符串。

如果我误解你，请告诉我。

在jquery中重写多个函数

1 个答案: