简单地重用函数 jquery答案

【问题标题】：Simple re-using a function jquery简单地重用函数 jquery
【发布时间】：2014-01-12 04:05:26
【问题描述】：

**你好，

如何为不同的变量重用一个jquery函数？**

我的工作示例允许向表单提交大量内容。当达到阈值时 - 然后该函数隐藏#form 并显示#block。它还显示剩余提交次数的计数。

我的代码只能管理一个表单 - 但我需要多个表单和阈值。

谁能帮我如何为每个表单单独设置阈值？？？

每个表单（#form1、#form2、#form3）都有一个计数器（#entry_count1、#entry_count2、#entry_count3）。

我喜欢设置：

(threshold1) for (form#1)

(threshold2) for (form#2)

(threshold3) for (form#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>

【问题讨论】：

标签： jquery function selector reusability

【解决方案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);

它将与 var 中的匿名函数和“普通”函数一起使用。

【讨论】：

【解决方案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>

这应该可以，我还没有测试过...

【讨论】：