首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >变量不能全局使用jQuery,需要在函数内部定义,为什么?

变量不能全局使用jQuery,需要在函数内部定义,为什么?
EN

Stack Overflow用户
提问于 2018-01-26 05:45:01
回答 3查看 59关注 0票数 0

我有一个片段

代码语言:javascript
运行
复制
  let bgColor;
  let toolColor;

  let brushTool = $('.fa-paint-brush');

  // Build the Grid
  CREATE_CANVAS_FORM.submit(function(event) {
    event.preventDefault();

    // Show good popups
    CREATE_GRID_POPUP.addClass('hidden');
    CANVAS_TABLE.removeClass('hidden');

    // Build the grid
    makeGrid();

    // Setup the grid
    bgColor = BG_COLOR_GRID.val();
    toolColor = TOOL_COLOR_GRID.val();

    CANVAS_TABLE.css('background-color', bgColor);
    BACK_COLOR.val(bgColor);
    TOOL_COLOR.val(toolColor);

    // Select the brush tool
    brushTool.addClass('selected-tool');
  });

变量bgColor和toolColor运行良好,但brushTool变量运行不正常。我需要在另一个函数中使用这个变量,所以我不能在这个函数中定义它。

这是唯一一个不起作用的变量,我需要在函数中放入let brushTool = $('.fa-paint-brush');行才能使其起作用。

有人能帮我找出原因吗?也许可以给我一个提示,让我全局定义变量?

这是完整的代码:https://codepen.io/maevanapcontact/pen/Gybaqv函数从第275行开始,相应的HTML元素是字体画笔,当添加类时,它应该会变成橙色。

要运行该函数:单击绿色加号圆圈>单击按钮"create canvas“

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-01-26 06:29:33

您的JQuery选择器工作正常。您面临的问题是,用<svg>元素替换<i>元素的字体太棒了,所以您的brushTool变量现在引用了DOM中不存在的元素。

有关参考,请参阅https://fontawesome.com/how-to-use/svg-with-js

您可以编写一个按需返回元素的函数,并在需要时使用它。

代码语言:javascript
运行
复制
function getBrushTool() {
    return $(".fa-paint-brush");
}

或者,您可以将<i class="fa-paint-brush">包装在另一个元素中,并为外部元素提供一个id,您可以在js中访问和修改该id。

编辑:您也可以将此代码添加到脚本的顶部,以指示font awesome嵌套元素而不是替换它。

代码语言:javascript
运行
复制
FontAwesomeConfig = { autoReplaceSvg: 'nest' }

最后,更新您的css以针对svg。

代码语言:javascript
运行
复制
.selected-tool svg {
    color: #e9722a;
}
票数 0
EN

Stack Overflow用户

发布于 2018-01-26 05:50:30

您可以使用window声明变量,并使它们在所有作用域中都可用。然后,该变量将在所有函数中始终可用。varlet的作用域是有限的。即

代码语言:javascript
运行
复制
window.brushTool = $('.fa-paint-brush');

此时,您可以在任何地方使用变量brushTool

票数 0
EN

Stack Overflow用户

发布于 2018-01-26 06:08:19

尝试使用LocalStorage

代码语言:javascript
运行
复制
  localStorage.setItem('brushTool', '$(".fa-paint-brush")');

并通过以下方式获得值:

代码语言:javascript
运行
复制
var brushTool = localStorage.getItem('brushTool');
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48452398

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档