使用jquery时未检测到全局变量但没有错误答案

【问题标题】：global variable is not detected when using jquery but no error使用jquery时未检测到全局变量但没有错误
【发布时间】：2018-09-27 01:57:40
【问题描述】：

您好 :) 这似乎是一个愚蠢的问题，但我的全局变量在 jquery 函数中不起作用。

这里我在函数外创建了一个变量，我把它命名为“css”：

var css = ' {width: 200px; font-family: "Futura", sans-serif; text-align: center; flex-grow: 1; flex-basis: 0; padding: 8px 10px;}';

在声明之后的函数中，我在 jquery 函数中调用了“css”变量：

function create() {

var Elements = "";

var divId = "num";

for (var i = 0 + initial; i < 7 + initial; i++) {
  divId += i;
  Elements += '<div id=' + divId + '>' + i + '</div>';

  $('<style>' + '#' + css + '</style>').appendTo(document.head);
}

var container = document.getElementById("row");
container.innerHTML = Elements;

}

但输出的样式不符合应有的样式。奇怪的是我也没有得到未定义变量的任何错误。当我将变量声明放在function create() 中时，一切正常。但我不希望这样，因为我会有多个类似于function create() 的函数，如果我只声明一次变量会更有效。

我怀疑这是因为 jquery 的性质？有什么帮助吗？

【问题讨论】：

看起来你添加了# { ... } 作为样式，你确定它在没有 id 的情况下可以工作吗？
@ChrisLi 哎呀我忘记了“divId”。我添加后它工作。非常感谢！

标签： javascript jquery css web frontend

【解决方案1】：

似乎 Chris Li 的评论解决了你的问题，但没有创建答案，而且这个问题似乎不会被关闭。

如果 Chris Li 决定创建一个答案，我将删除我的答案。

除了他的回答之外，我强烈建议不要将变量命名为Elements。 JavaScript 中的变量不应以大写字母开头。要查看变量命名约定，请查看W3Schools JavaScript Style Guide中标题为“变量名称”的部分

我总是发现在 sn-p 中查看代码工作更容易，所以我在下面创建了一个来演示您的问题。

// Use const for variables that don't change and let for local variables instead of var
// if your browser environment supports it.
const css = '{width: 200px; font-family: "Futura", sans-serif; text-align: center; flex-grow: 1; flex-basis: 0; padding: 8px 10px;}';

function create() {

    // I have no idea what `initial` refers to so I'll just use a placeholder here.
    let initial = 0;

    let elements = '';
  
    let divId = 'num';
  
    for (let i = 0 + initial; i < 7 + initial; i++) {
  
        divId += i;
    
        elements += '<div id=' + divId + '>' + i + '</div>';
    
        // The above line can also be written using template literals.
        // elements += `<div id=${divId}>${i}</div>';
    
        $('<style>' + '#' + divId + css + '</style>').appendTo(document.head);
        
    }
    
    const container = document.getElementById('row');
    
    container.innerHTML = elements;
    
}

// Call the create function to see it in action.
create();

<div id='row'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：