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

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

3 个答案: