javascript - 显示变量列表中的文本

Question

我的网站上有一系列页面，它们利用 JavaScript 根据页面中定义的变量显示标题。

基本 HTML

<h1 id="pageTitle"></h1>
<script> var page = "start";</script>
<!-- Rest of the page... -->

单独的 JavaScript 文件

var startText = "Hello!";
var middleText = "This is a page";
var endText = "Example";

if(page == 'start'){
  $('#pageTitle').html(startText);
}
if(page == 'middle'){
  $('#pageTitle').html(middleText);
}
if(page == 'end'){
  $('#pageTitle').html(endText);
}

这遵循一个简单的模式，可以很好地完成工作，但随着网站的增长可能会变得乏味。有没有更清洁的方法来获得相同的结果？

标签： javascriptjqueryhtmlvariables

Answer 1

使用对象引用键...

var messages = {
  "foo" : "bar",
  "hello" : "world"
}

function setMessage(key) {
   document.querySelector("#out").innerHTML = messages[key];
}

setMessage("hello");

<div id="out"></div>