Отображать текст из списка переменных

У меня есть ряд страниц на моем сайте, которые используют 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);
}

Это следует простой схеме, которая отлично справляется со своей задачей, но может стать утомительной по мере роста веб-сайта. Есть ли более чистый способ получить тот же результат?

1
0
375
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Используйте ссылку на объект ключ ...

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

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

setMessage("hello");
<div id="out"></div>

Более чистый способ - организовать заголовки в словаре.

var titles = {
  "start": "Hello!",
  "middle": "This is a page",
  "end": "Example"
}

$('#pageTitle').html(titles[page]);
Ответ принят как подходящий

Вместо того, чтобы определять переменную JS на каждой странице, я предлагаю прикрепить атрибут data-* к тегу заголовка, например:

<h1 id="pageTitle" data-page="start"></h1>

Затем в отдельном файле JS вы можете создать объект, содержащий список title, и использовать атрибуты data-page в качестве ключа, например:

var titles = {
  "start": "Hello!",
  "middle": "This is a page",
  "end": "Example"
}

var title_element = $("#pageTitle");
var key = title_element.data('page');

title_element.text(titles[key]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="pageTitle" data-page="middle"></h1>

Всегда полезно организовать свой код в виде модульных функций. Это поможет сохранить ваш код в сопровождении.

function init(title) {
  document.querySelector("#pageTitle").innerHTML = getTitleHtml(title);
}

function getTitleHtml(title) {
  const titleMap = {
    start: "Hello",
    middle: "This is a page",
    end: "Example"
  };
  return titleMap[title];
}

var title = "end";
init(title);
<h1 id="pageTitle"></h1>

Другие вопросы по теме