簡單的重新使用功能的jQuery

Question

**您好，

如何重用不同變量的jQuery功能？**

我的工作例如允許一些意見的形式。當達到閾值時 - 那麼該函數會隱藏#form並顯示一個#block。它還會顯示剩餘提交的數量。

我的代碼只能管理一種形式 - 但我需要多種形式和閾值。

任何人都可以幫助我如何爲每個窗體設置單獨的閾值？

每個表格（＃form1，＃form2，＃form3）都有一個計數器（＃entry_count1，＃entry_count2，＃entry_count3）。

我喜歡設置：

（閾值1），用於（形式＃1）

（閾值2），用於（形式＃2）

（閾值3），用於（形式＃3）

....

工作代碼：

<script type="text/javascript"> 

var threshold1 = 30; // Set this to the # of entries to trigger on 
var threshold2 = 12; 
var threshold3 = 24; 

var form1_to_hide = ["#form1」]; // CSS selectors of forms to hide when triggered 
var form2_to_hide = ["#form2」]; 
var form3_to_hide = ["#form3」]; 
var block_to_show = [「#block」]; // CSS selector of block to show when triggered 


// The function 
$(function(){ 

$('#entry_count1’).on('changed.content', function(event){ 
var count1 = parseInt($('.ss_entry_count_value', this).text()); 
var currentCount1 = threshold1 - count1; 


if(count1 >= threshold1){ 


$.each(form1_to_hide, function(i) 
{ 
$(form1_to_hide[i]).hide(); 
}); 
$.each(block_to_show, function(i){ 
$(block_to_show[i]).show(); 
}); 
} 

    if(count1 >= threshold1) 
{ 
$.each(form1_to_hide, function(i){ 
$(form1_to_hide[i]).hide(); 
}); 
$.each(block_to_show, function(i){ 
$(block_to_show[i]).show(); 
}); 
} 

$("#result1」).text(currentCount1); 

}); 
}); 

</script> 

Answer 1

我不知道如果我得到你的問題清楚，但這裏是一個鏡頭：

什麼是使用jquery人做了很多是使用「匿名函數」。你會看到他們是這樣的：

$('someID').on('eventName', function() { 
    // the anonymous function body 
}); 

匿名函數是（據我所知）的使用重碼的矛盾。因爲它沒有名字，所以你不能真正引用它。 ...當然，你總是可以做

var myFunction = function() { 
    // anonymous function body 
}; 

...陷入一個'姓名'的匿名函數。但我要說的是，做「正常」的JavaScript方式：

function myFunction() { 
    // normal function body 
} 

要在jQuery的重用這個代碼，只需做：

$('someID').on('eventName', myFunction); 

它將與匿名函數工作在一個變種，並具有「正常」功能。

Answer 2

這是更好地使用的陣列配置，如價值觀，

<script type="text/javascript"> 

var threshold_config = [ 
          {limit: 30, forms_to_hide : ["#form1"], block_to_show:["block"] }, 
          {limit: 12, forms_to_hide : ["#form2"], block_to_show:["block"] }, 
          {limit: 24, forms_to_hide : ["#form3"], block_to_show:["block"] } 
         ]; 


// The function 
$(function(){ 

    $('#entry_count1’).on('changed.content', function(event){ 
    var count1 = parseInt($('.ss_entry_count_value', this).text()); 
    var currentCount1 = threshold1 - count1; 

    $.each(threshold_config, function(index) 
    { 
     var threshold1 = threshold_config[index].limit; 
     var form1_to_hide = threshold_config[index].forms_to_hide; 
     var block_to_show = threshold_config[index].block_to_show; 
     if(count1 >= threshold1){ 


      $.each(form1_to_hide, function(i) 
      { 
       $(form1_to_hide[i]).hide(); 
      }); 
      $.each(block_to_show, function(i){ 
       $(block_to_show[i]).show(); 
      }); 
     } 

     if(count1 >= threshold1) 
     { 
      $.each(form1_to_hide, function(i){ 
       $(form1_to_hide[i]).hide(); 
      }); 
      $.each(block_to_show, function(i){ 
       $(block_to_show[i]).show(); 
      }); 
     } 

     $("#result1").text(currentCount1); 

    }); 

    }); 

}); 

</script> 

這應該工作，我沒有測試過...