Борьба с рационализацией javascript

Question

Я всегда нахожу, что я копирую и вставляю одну и ту же функцию снова и снова. У меня много проблем с пониманием того, как писать более гибкий код.

$(document).on('mouseenter mouseleave','#claps10',function() { 
    "use strict"; 
    if ($(window).width() > 800) { 
     $('.inco10').stop().animate({width: 'toggle', height: '125px'}); 
    } 
}); 

$(document).on('mouseenter mouseleave','#claps11',function() { 
    "use strict"; 
    if ($(window).width() > 800) { 
     $('.inco11').stop().animate({width: 'toggle', height: '125px'}); 
    } 
}); 

У меня есть 11 из тех, когда я знаю, что есть лучший способ иметь только один. Я просто недостаточно квалифицирован для этого. Как вы это называете, и можете ли вы показать мне пример того, как это можно сделать?

Answer 1

Получить все элементы, имеющие идентификатор, начиная с claps используя [id^=claps] селектор, а затем получить идентификатор целевого элемента с помощью $(this) (claps11, например) удалить claps из идентификатора с помощью $(this).attr("id").replace("claps", ""), чтобы получить число (11), а затем сцепить его с класс.

$(document).on('mouseenter mouseleave','[id^=claps]',function() { 
     "use strict"; 

     var idNumber = $(this).attr("id").replace("claps", ""); 
     if ($(window).width() > 800) { 
      $('.inco'+idNumber).stop().animate({width: 'toggle', height: '125px'}); 
     } 
    }); 

Answer 2

Другой способ добиться этого:

Используйте имя класса для MouseEnter и MouseLeave

$(document).on('mouseenter mouseleave','.claps',function() { 
"use strict"; 
    logicFunction(this.id.replace("claps", "inco"); 
}); 
function logicFunction(className) 
{ 

    if ($(window).width() > 800) { 
     $('.'+className).stop().animate({width: 'toggle', height: '125px'}); 
    } 
}