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功能，在每个模板中您只需要更改三个变量。

Answer 2

您可以将脚本放在php文件中，并将变量传递给查询字符串。使用标题（“Content-type：application / x-javascript”）;将其渲染为javascript文件。看一下这个例子：http://www.webhostingtalk.com/showthread.php?t=494879

另一种方法是使用location.href检查您的地址。例如，您的地址是page1.html，page2.html page3.html然后

if (location.href.match(/page1/))  { //assign id for page 1 //}

...等搜索location.href.match以获取更多示例并使用

如何动态地从每个页面传递参数到javascript

2 个答案: