javascript - 如何动态地将参数从每个页面传递给javascript

Question

以下代码在每个列表页面(例如下面给出的示例列表页面)上提供删除功能，其中每个页面中只有 3 个变量(tableId、removeButtonId、headerCheckbox)有所不同。如何在所有页面中重复使用此脚本，而不是在每个页面中定义此脚本。如何从每个页面动态地将参数传递给此脚本？

        <script type="text/javascript">
            var tableId = '#usersChildren\\:userList';
            var removeButtonId = '#usersChildren\\:removeUsers';
            var headerCheckbox = '#selectAll';

            jQuery(document).ready(function() {
                if (jQuery(tableId).find("input[type='checkbox']").length == 1) {
                    jQuery(headerCheckbox).hide();
                    jQuery(removeButtonId).hide();
                } else if(jQuery(tableId).find("input[type=checkbox]:checked").length == 0) {
                    jQuery(removeButtonId).hide();
                    jQuery(headerCheckbox).click(function() {
                        jQuery(tableId).find("input[type='checkbox']").attr('checked', jQuery(headerCheckbox).is(':checked'));
                    });
                }

                jQuery(tableId).find("input[type='checkbox']").each(function() {
                    if(jQuery(this).attr('id') != headerCheckbox) {
                        jQuery(this).click(function() {
                            if (jQuery(headerCheckbox).is(':checked')) {
                                if(jQuery(tableId).find("input[type=checkbox]:checked").length != 1) {
                                    jQuery(removeButtonId).show();
                                }
                            } else if(jQuery(tableId).find("input[type=checkbox]:checked").length > 0) {
                                jQuery(removeButtonId).show();
                            } else {
                                jQuery(removeButtonId).hide();
                            }
                        });
                    }
                });
            });
        </script>

Answer 1

将此代码放入源自脚本标记的脚本中，放在需要它的每个模板上:

function bindRemoveButton(tableId, removeButtonId, headerCheckbox) {
  if (jQuery(tableId).find("input[type='checkbox']").length == 1) {
      jQuery(headerCheckbox).hide();
      jQuery(removeButtonId).hide();
  } else if(jQuery(tableId).find("input[type=checkbox]:checked").length == 0) {
      jQuery(removeButtonId).hide();
      jQuery(headerCheckbox).click(function() {
          jQuery(tableId).find("input[type='checkbox']").attr('checked', jQuery(headerCheckbox).is(':checked'));
      });
  }

  jQuery(tableId).find("input[type='checkbox']").each(function() {
      if(jQuery(this).attr('id') != headerCheckbox) {
          jQuery(this).click(function() {
              if (jQuery(headerCheckbox).is(':checked')) {
                  if(jQuery(tableId).find("input[type=checkbox]:checked").length != 1) {
                      jQuery(removeButtonId).show();
                  }
              } else if(jQuery(tableId).find("input[type=checkbox]:checked").length > 0) {
                  jQuery(removeButtonId).show();
              } else {
                  jQuery(removeButtonId).hide();
              }
          });
      }
  });
}

在每个需要它的模板上

<script type="text/javascript" src="remove.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    var tableId = '#usersChildren\\:userList';
    var removeButtonId = '#usersChildren\\:removeUsers';
    var headerCheckbox = '#selectAll';

    bindRemoveButton(tableId, removeButtonId, headerCheckbox);
  });
</script>

现在您可以在一处更改 bindRemoveButton 函数，并且在每个模板中您只需更改三个变量。