Question

有一个变量让我们说var content包含一些HTML内容，这个HTML也包含一个JavaScript变量，比如说${id}。现在我想更新${id}变量的值。我尝试使用以下代码，但它不起作用。

var id = '';
var content = `<div class="row well margin_btm_ten">
    <div class="col-md-1">
        <b>ID is ${id}</b>  
    </div>`;
row_id = 2;
setTimeout(function(){
    console.log(content)
});

Answer 1

你可以让内容成为一个返回html内容的函数，这样它就会在每次调用时计算出来。这样，如果id变量发生变化，content（）返回的值也会改变：

var id = 'one';
var content = () => `<div class="row well margin_btm_ten">
    <div class="col-md-1">
        <b>ID is ${id}</b>  
    </div>`;
console.log(content());
id = 'two';
console.log(content());

Answer 2

由于使用变量id的当前值创建了对“内容”的引用，因此无法实现。 JavaScript变量基本上是用于存储数据值的容器。您需要“重新运行”content变量，才能获得新的id。但我认为你应该使用函数而不是覆盖变量。

const printName = (name => console.log(`Hello ${name}`));

let name = "Mark";

printName(name);

name = "Peter";

printName(name);

Answer 3

您可以使用 id属性的自定义设置器为id设置一个功能，每次设置新content时，id都会更新function id() { var id; Object.defineProperty(this, 'id', { get() { return id; }, set(value) { id = value; content = `<div class="row well margin_btm_ten"> <div class="col-md-1"> <b>ID is ${id}</b> </div>`; }, enumerable: true, configurable: true }); }; var obj = new id(); var content = `<div class="row well margin_btm_ten"> <div class="col-md-1"> <b>ID is ${obj.id}</b> </div>`; console.log(content) // id: undefined app.innerHTML += content obj.id = 2; console.log(content) // id: 2 app.innerHTML += content obj.id = 'Hello World!'; console.log(content) // id: 'Hello World' app.innerHTML += content

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set

<div id="app"></div>

forEach

我们可以在javascript中更改存储在另一个变量中的变量的值

3 个答案: