创建一个供多个控件使用的全局 jQuery 函数

Question

我有多个控件，不同类型的控件具有相同的行为。 如何使用单个函数来重用相同的行为。现在我对他们每个人都有一个功能。这个函数可以正常工作，但我想找到一种方法，如果我们可以用一个全局函数替换这个函数并重用它。

$(document).ready(function () {

    var threechecked = false;
    var fourchecked = false;

    $('#<%=CheckBoxList1.ClientID%> input:checkbox').click(function () {

        var currentIdone = 'Unknown';
        var currentId = $(this).next().html();
        if (currentId == currentIdone) {

            if (threechecked) {

                $("#<%=CheckBoxList1.ClientID%> input").removeAttr('disabled');
                threechecked = false;
                return;
            }
            else {
                $("#<%=CheckBoxList1.ClientID%> input").attr('checked', false);
                $(this).attr('checked', true);
                $('#<%=CheckBoxList1.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
                threechecked = true;
            }


        }

    });


    $('#<%=CheckBoxList2.ClientID%> input:checkbox').click(function () {


        var currentIdone = 'Unknown';
        var currentId = $(this).next().html();
        if (currentId == currentIdone) {

            if (fourchecked) {

                $("#<%=CheckBoxList2.ClientID%> input").removeAttr('disabled');
                checked = false;
                return;
            }
            else {
                $("#<%=CheckBoxList2.ClientID%> input").attr('checked', false);
                $(this).attr('checked', true);
                $('#<%=CheckBoxList2.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
                fourchecked = true;
            }


        }

});

有没有一种方法可以创建单个函数并由每个控件重用相同的函数？

Answer 1

有些人可能会争辩说，将函数附加到全局 window 对象可能有点奇怪，但实际上它与全局函数相同。

window.foo = function() {
    /* Your code here */
};

然后你可以在 DOM 准备好时执行这个函数：

$(document).ready(window.foo);

Answer 2

我为您的问题做了一个解决方案示例。如果你愿意，我把它放在JSBin

假设你有这个 HTML：

<div class="unknownSelectable">
  <input type="checkbox" value="0" name="Anything" id="Anything1" />
  <label for="Anything1">Unknown</label>
  <input type="checkbox" value="0" name="Anything" id="Anything2" />
  <label for="Anything2">Label 1</label>
  <input type="checkbox" value="0" name="Anything" id="Anything3" />
  <label for="Anything3">Label 2</label>
  <input type="checkbox" value="0" name="Anything" id="Anything4" />
  <label for="Anything4">Label 3</label>
</div>
<h1>Select</h1>
<div class="unknownSelectable">
  <input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything1" />
  <label for="AnotherAnything1">Unknown</label>
  <input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything2" />
  <label for="AnotherAnything2">Label 1</label>
  <input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything3" />
  <label for="AnotherAnything3">Label 2</label>
  <input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything4" />
  <label for="AnotherAnything4">Label 3</label>    
</div>

只要放这个 Javascript 就可以了：

$( ".unknownSelectable input" ).change(function( event ){
  
  var labelSelected = $( this ).next().html();
  
  if ( labelSelected == "Unknown" ) {
    var $siblings = $( this ).siblings( "input[type='checkbox']" );
    
    if( $( this ).is( ":checked" ) )
      $siblings.prop( "checked", false );
    else
      $siblings.prop( "checked", true );
    
  }
  
});

我将事件从单击更改为更改，因为单击输入或标签都没有关系。我也将它包裹在一个 div 元素中，但无论如何，您也可以将它包裹在另一个 HTML 元素中。

对不起我的英文，如果我有一些英文错误，请随时重新编写和改进。

Answer 3

我猜它是这样工作的

$( ".unknownSelectable input" ).change(function( event ){

  var labelSelected = $( this ).next().html();

  if ( labelSelected == "Unknown" ) {
    var $siblings = $( this ).siblings( "input[type='checkbox']" );

    if( $( this ).is( ":checked" ) )
    {
      $siblings.prop( "checked", false );
      $siblings.attr( "disabled", "disabled" );    
    }
    else{
      $siblings.removeAttr( "disabled" );
    }

  }

});

JSBin