在将直接在页面中编码的代码移动到我的网站资产以允许参数和重用时需要帮助

Question

我正在尝试将嵌入在页面上的一些代码移动到我的站点资产中，以允许我通过传入参数而不是在多个页面上复制相同的代码来重用此代码。

当我将脚本直接放入脚本编辑器时，我的脚本可以工作。 我现在正在尝试将其放入我的网站资产中，并从脚本编辑器引用它。 我现在无法让它工作。

下面的代码在脚本编辑器中直接插入我的页面时可以完美运行。

<script type="text/javascript">
$(function () {
//set section text and field name
AddSectionBeforeField("Phase Section","Phase");
});
function AddSectionBeforeField(sectionText,fieldName){
var $fieldTR=$(".ms-standardheader nobr:contains('"+fieldName+"')").closest("tr");
$fieldTR.before("<tr style='background-color:white'><td colspan='2' class='ms-formbody' style='padding:0; color: #96c03d;'><div style='font-size:22px;margin-top: 10px;margin-bottom: 10px;font-family: Oswald';'>"+sectionText+"</div></td></tr>");
}
function changeButtonStyle()
{ 
var inputs = document.getElementsByTagName("input");  
alert('aa');
for(i = 0; i<inputs.length; i++)  
{   
if(inputs[i].type == "button" && inputs[i].value == "Save")
{
inputs[i].style.backgroundColor='#96C03D'; 
inputs[i].style.color ='white';   
inputs[i].style.width= "160px";
inputs[i].style.height = "40px";
inputs[i].style.fontSize = "16px";
}
if(inputs[i].type == "button" && inputs[i].value == "Cancel")
{
inputs[i].style.backgroundColor='#96C03D'; 
inputs[i].style.color ='white';   
inputs[i].style.width= "160px";
inputs[i].style.height = "40px";
inputs[i].style.fontSize = "16px";
}           
}  
}
_spBodyOnLoadFunctionNames.push("changeButtonStyle");
</script>

然后，我将脚本编辑器更改为包含以下内容

<script type="text/javascript" src="../SiteAssets/js-test/EditChanges.js"></script>

在我的资源库中，我的 EditChanges.js 包含以下代码：(除标记外，代码相同。

$(function () {
//set section text and field name
AddSectionBeforeField("Phase Section","Phase");
});
function AddSectionBeforeField(sectionText,fieldName){
var $fieldTR=$(".ms-standardheader nobr:contains('"+fieldName+"')").closest("tr");
$fieldTR.before("<tr style='background-color:white'><td colspan='2' class='ms-formbody' style='padding:0; color: #96c03d;'><div style='font-size:22px;margin-top: 10px;margin-bottom: 10px;font-family: Oswald';'>"+sectionText+"</div></td></tr>");
}
function changeButtonStyle()
{ 
var inputs = document.getElementsByTagName("input");  
for(i = 0; i<inputs.length; i++)  
{   
if(inputs[i].type == "button" && inputs[i].value == "Save")
{
inputs[i].style.backgroundColor='#96C03D'; 
inputs[i].style.color ='white';   
inputs[i].style.width= "160px";
inputs[i].style.height = "40px";
inputs[i].style.fontSize = "16px";
}
if(inputs[i].type == "button" && inputs[i].value == "Cancel")
{
inputs[i].style.backgroundColor='#96C03D'; 
inputs[i].style.color ='white';   
inputs[i].style.width= "160px";
inputs[i].style.height = "40px";
inputs[i].style.fontSize = "16px";
}           
}  
}
_spBodyOnLoadFunctionNames.push("changeButtonStyle");

我希望在"阶段"字段上方放置一个标题。

Answer 1

不是你真正的问题的答案，但需要很多代码来评论。

一个简单的 CSS 规则可以让您避免循环查找应用样式的按钮。

button[value="Cancel"],
button[value="Save"] {
background-color: #96C03D;
color: white;
width: 160px;
height: 40px;
font-size: 16px;
}

<button>Test</button>
<button value="Save">Save</button>
<button value="Cancel">Cancel</button>

Answer 2

经过一些测试和更多的观察。 任何脚本的引用都相对于页面在 URL 中的位置。 对于网站页面，网站资产的引用是../站点资产。 对于列表页面，引用是../../站点资产。 如果你真的考虑一下，这很简单。 很抱歉浪费了人们的时间，但这是我不知道的。