многоразовая функция внутри JQuery функции парения

Question

Ниже мой JQuery код: (Вы можете увидеть исходный код всего и проверить его here)

$("document").ready(function() { 
    $("#pclass").hover(function() { 
     $("p[class]").css("border", "3px solid red"); 
     }, function() { 
     $("p[class]").css("border", "none"); 
     } 
    ); 
    $("#pidpara1").hover(function() { 
     $("p[id=para1]").css("border", "3px solid red"); 
     }, function() { 
     $("p[id=para1]").css("border", "none"); 
     } 
    ); 
    ... 
    } 

Вы видите, я использовал css("border", "3px solid red"); и css("border", "none"); еще много раз. Итак, как я могу сделать код повторно используемым в этом случае? (Вы можете увидеть весь исходный код и протестировать его here) 1.

Answer 1

Выяснить, какие части операций одинаковы и какие части различны, а затем создать функцию, которая принимает аргументы для частей, которые различаются:

$(document).ready(function() { 
    addBorderOnHover("#pclass", "p[class]"); 
    addBorderOnHover("#pidpara1", "p[id=para1]"); // "p[id=para1]" can be "#para1", of course 

    function addBorderOnHover(hoverSel, borderSel) { 
     $(hoverSel).hover(function() { 
      $(borderSel).css("border", "3px solid red"); 
      }, function() { 
      $(borderSel).css("border", "none"); 
      } 
     ); 
    } 
}); 

Side Примечания: Кроме того, обратите внимание, что я удалил цитату около document, которого там не должно быть.