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

Question

您好 :) 这看起来像是一个愚蠢的问题，但我的全局变量在 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;

}

但是输出的样式没有应有的样式。奇怪的是我也没有收到任何 undefined variable 的错误。当我将变量声明放入 function create() 时，一切正常。但我不希望那样做，因为我会有多个类似于 function create() 的函数，如果我只声明一次变量，效率会更高。

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

Answer 1

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

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

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

我总是发现在片段中查看代码更容易，因此我在下面创建了一个片段来演示您的问题。

// 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>