Как повторно использовать функцию javascript на той же странице?

Question

Код:

<script type="text/javascript"> 
    function flip() { 
     $("#email_flip").on("click",function(e){ 
     $(".flipbox").flippy({ 
      color_target: "#F4F4F4", 
      direction: "top", 
      duration: "750", 
      verso: "text1", 
      onFinish: function(){ 

        $("#back").on("click",function(e){ 
         $(".flipbox").flippyReverse(); 
         setTimeout(function() { 
         flip(); 
         }, 1000); 
        }); 


     } 
     }); 
     e.preventDefault(); 
     }); 
    } 
    $(document).ready(function(){flip();}); 
    </script> 
<script type="text/javascript"> 
$("#back").on("click",function(e){ 
    $(".flipbox").flippyReverse(); 
}); 
</script> 

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

Я использую следующий плагин: http://blog.guilhemmarty.com/flippy/

Answer 1

Отказ от ответственности: я написал это, никогда не используя или глядя на плагин. Его необходимо протестировать и, возможно, потребуется больше работы. Например, функция может иметь нежелательные побочные эффекты для элементов с классом .flipbox, которые были настроены другими вызовами функции. Все это обеспечивает пример того, как написать функцию. Ваша конкретная проблема может быть не решена.

Чтобы начать, оберните свой код в function somename(your arguments){}.

Поместите это в файл и назовите его myflip.js

function myflip(clickID, backID, versoContent){ 
    function flip() { 
     $(clickID).on("click",function(e){ 
     $(".flipbox").flippy({ 
      color_target: "#F4F4F4", 
      direction: "top", 
      duration: "750", 
      verso: versoContent, 
      onFinish: function(){ 

        $(backID).on("click",function(e){ 
         $(".flipbox").flippyReverse(); 
         setTimeout(function() { 
         flip(); 
         }, 1000); 
        }); 


     } 
     }); 
     e.preventDefault(); 
     }); 
    } 
    $(document).ready(function(){flip();}); 
    $(backID).on("click",function(e){ 
     $(".flipbox").flippyReverse(); 
    }); 
} 

Рефакторинг примечание: function() { flip(); } появляется повторно и часто может быть переработан просто flip без скобок, потому что flip является функцией и мы не переставляя параметров или делать что-либо с анонимной оболочкой. Я оставлю вам такие твики.

Затем в HTML вам нужно

<script src="myflip.js"></script>

И после этой строки вы можете использовать его из тега сценария с:

<script>myflip("#email_flip","#back","text1"); </script>

хотя лучше разойтись html и javascript, сохраняя все javascript в .js-файлах и импортируя эти файлы с помощью тегов скриптов.