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文件中使用相同的函数名称并非最佳做法。外部J可用于跨页面定义常用功能，并可包含在页面中。

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);

}）;

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

3 个答案: