如何在一个文件中简单地组合JS函数

Question

我正在使用一些简单的IF / show / hide脚本。

我设法使脚本的独立部分正常工作，但由于某种原因它们会发生冲突，并且我不知道如何将两者合并为一个文件。

两者都旨在在选择上一个表单字段时显示新表单字段

第一：

 $(document).ready(function () { toggleFields(); $("#tukreward").change(function () { toggleFields(); }); }); function toggleFields() { if ($("#tukreward").val() == "interested") $("#tukFollow").show(); else $("#tukFollow").hide(); } 

第二：

 $(document).ready(function () { toggleFields(); $("#accident").change(function () { toggleFields(); }); }); function toggleFields() { if ($("#accident").val() == "yes") $("#accidentFollow").show(); else $("#accidentFollow").hide(); } 

彼此独立地工作正常，但是如果我将它们另存为单独的文件并加载页面，则其中一个有效，而另一个则无效。 我曾尝试将其组合成一个文件，但不知道是否缺少某种格式。

Answer 1

它们都创建并调用函数toggleFields() 。 当您加载第二个脚本时，第二个脚本将覆盖第一个脚本定义。 最简单的解决方案是将第二个文件的toggleFields为toggleFields2

Answer 2

在不同的js文件中使用相同的函数名不是最佳实践。 外部Js可用于定义页面之间的通用功能，并可包含在页面中。

Answer 3

您正在创建两个具有相同名称的函数，第二个函数将覆盖第一个函数。

我的建议是使用单个函数并添加参数，以避免重复。

// First file
function toggleFields(fieldToCheckQuery, fieldToCheckShowValue, fieldToShowHideQuery) {
  if ($(fieldToCheckQuery).val() == fieldToCheckShowValue) {
    $(fieldToShowHideQuery).show();
  } else {
    $(fieldToShowHideQuery).hide();
  }
}

// Second file
function toggleTuk() {
    toggleFields("#tukreward", "interested", "#tukFollow");
}

$(document).ready(function () {
  toggleTuk(); 
  $("#tukreward").change(toggleTuk);
}

// Third file
function toggleAccident() {
  toggleFields("#accident", "yes", "#accidentFollow");
}
$(document).ready(function () {
  toggleAccident(); 
  $("#accident").change(toggleAccident);

}）;