在jquery中重写多个函数

Question

我在不同的透明标签上使用 mouseover 和 mouseleave 来交换页面上的背景图像。如果我单击其中一个标签，则退出该功能并保留鼠标悬停的背景图像。单击时还会将 div 显示设置为阻止，在 css 中设置为无。我还有另一个单击功能，它将背景图像设置为原始背景图像，并将 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
       ... 
       ...
 });

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

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