如何从外部jQuery文件调用HTML文档中的函数

Question

在运行外部js（jQuery）文件中的函数之后，我需要有关在html doc中运行函数的逻辑和方法方面的帮助。

我有两个外部jQuery文件。 两者都创建表，但是timesheet_test.js的功能远不止于此。 timesheet_my_table_test.js（创建表1）和timesheet_test.js（创建表2）。

表1中的单元格在单击时会在html文档中运行一个功能。

例如

.append('<td class="earlyshift" onclick="setShift(this.className)"></td>')

功能：

function setShift(className) {
  // Gets the workday shift from the localStorage.
  const targetStateValue = localStorage.getItem('shiftstatus');

  // The logic for updating the value.
  if (targetStateValue === null) {
    localStorage.setItem('shiftstatus', className);
  } else {
    localStorage.setItem('shiftstatus', className);
  }
}

然后，单击表头（在表2中）时，timesheet_test.js将运行一个函数，其动作取决于上表1中最后一次单击哪个单元格。

例如

MOUSEDOWN：

if (targetStateValue === "earlyshift") {
  var startCell = [0,curColHead.data("col")];
  isColSelecting = true;
  startSelecting(ev,startCell);
}

鼠标松开：

if (targetStateValue === "earlyshift") {
  var endCell = [14,curColHead.data("col")];
  var correctedCells = cellCompare(operationArea.startCell,endCell);
  afterSelecting(ev,correctedCells);                        
}

此功能的最终结果是，它将表2中的背景颜色（当前在CSS中设置）更改为所选列中的单元格0到单元格14。

然后，我想运行另一个功能，即html文档中的功能（无需添加其他按钮即可单击）。 我目前必须单击一个按钮来运行它，并想取消该按钮（它已经需要2到3次表单击才能完成该过程）。 我希望它在上面的Mouseup事件之后执行：

该功能远未完成，但仍可以正常工作。 完成后，它将在启动此过程的相应单元格中更改图标/图像（当前在css中设置）：

$("#J_timingSubmit2").click(function(ev){

  var sheetStates = sheet.getSheetStates();
  var rowsCount = 15;
  var colsCount = 7; //currently not used but want to use it in testData.match below.
  var timesheetrowsdata = "";
  var timesheetcoldata = "";

  for(var row= 0, rowStates=[]; row<rowsCount; ++row){
    rowStates = sheetStates[row];
    timesheetrowsdata += rowStates+(row==rowsCount-1?'':',');
  }

  timesheetcoldata = timesheetrowsdata.replace(/,/g, '');

  const testData = timesheetcoldata;
  const dataArr = testData.match(/.{1,7}/g)
  .map(s => Number(s[0]))

  let dataSum = dataArr.reduce((a, b) => a + b);

  let isSameAsRowsCount = dataSum == rowsCount;

});

这是有效的按钮代码（成功运行了上面的功能）：

<button class="J_sheetControl" id="J_timingSubmit2">Submit</button>

如何翻译该按钮代码，以便可以从其他js文件运行该功能？

Answer 1

我会重构您的代码，以便您拥有一个“库” javascript文件。 然后在两个页面上都包含该文件。

编辑：这模拟了我试图解释的事情。 尽管每个<script>标记都是单独的文件，但是其工作方式相同。

如果“库js文件”仅包含函数，则可以将其放在页面上的任何位置都可以，因为JavaScript会缓存所有函数和类的内容，并允许您在任何地方使用它，但是，如果您在库文件中声明了变量然后确保将其放在实际的javascript之上。

如果在那之后您的代码仍然无法使用，则您的代码可能存在问题

<html>
    <head>
        <script type="text/javascript">
            //library file
            var test = "hello world!";
        </script>
        <script type="text/javascript">
            //code
            console.log(test);
        </script>
    </head>
    <body>

    </body>
</html>

如何从外部jQuery文件调用HTML文档中的函数

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-19 15:09:02

如何从外部jQuery文件调用HTML文档中的函数

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-19 15:09:02

解决方案1
1 已采纳 2019-08-19 15:09:02