Помогите упростить код
Здравствуйте.
Написал JS код такого рода. Есть массив констант. Каждая содержит короткую фразу (подсказку). При клике на кнопку определенные фразы из массива вставляются в определенные дивы. Дивы помечены такими же именами как и константы из массива поэтому нужная фраза попадает в нужный див. Я новичок и код написал кривенько. Дело в том что пришлось сделать второй массив с именами констант, и это не удобно, когда нужно добавлять новые константы. Посмотрите, пожалуйста, может у вас будут идеи как от второго массива уйти?
export const gerAftPrep = "they normally put gerunds after prepositions";
export const presPerf = "brace yourself, it's the Present Perfect";
export const negatives = "need a special verb before not";
export const posPron = "possessive pronouns may be with you";
export const americans = "Americans often use the past simple instead of the present perfect";
export const toBe = "Check out the forms of to be";
export const prepTo = "Check out the prepositions of movement"
let tipNames = ["gerAftPrep", "presPerf", "negatives", "posPron", "americans", "toBe", "prepTo"];
let tips = [gerAftPrep, presPerf, negatives, posPron, americans, toBe, prepTo];
export function showTips()
{
let elements = document.querySelectorAll('p[name]');
elements.forEach(function(element,i)
{
let nameElement = element.getAttribute("name");
tipNames.forEach(function(value, index)
{
if (value === nameElement)
{
element.textContent = tips[index];
}
}
)
}
)
}
|
alrosavilla,
странные у вас div-ы p[name] создайте объект и тогда никаких массивов и один цикл всего, по ключам массива. |
alrosavilla,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<p data-name="gerAftPrep"></p>
<p data-name="presPerf"></p>
<p data-name="negatives"></p>
<script>
let tips = {
gerAftPrep: "they normally put gerunds after prepositions",
presPerf: "brace yourself, it's the Present Perfect",
negatives: "need a special verb before not"
};
function showTips() {
let elements = document.querySelectorAll('p[data-name]');
elements.forEach(function(element) {
let name = element.dataset.name;
if (name in tips) element.textContent = tips[name];
})
}
showTips()
</script>
</body>
</html>
|
рони,
спасибо большое! Все работает, и так гораздо проще! Див-ы странные, это правда. Просто параграфы находятся внтури див-ов, не стал об этом писать. Не знал про dataset. Сейчас посмотрел, очень удобный инструмент. А получается что в строке "if (name in tips) element.textContent = tips[name]" функция смотрит есть ли такое имя в объекте tips и, если есть, то в итерируемый элемент вставляется текст из объекта с таким же именем? |
Цитата:
|
рони, еще один вопрос.
Я сделал вторую HTML и прикрепил к ней второй js. Затем импортировал туда функцию showTips. Но она почему-то собирает data-name с первой HTML. Я попробовал во втором js убрать showTips и просто вставил let elements = document.querySelectorAll('p[data-name]'); console.log(elements); Но все равно отображаются элементы с первой HTML. Эта такая особенность dataset или я что-то мог неправильно сделать? |
alrosavilla,
не могу подсказать, недостаточно информации. |
Извнияюсь, я с gulp сборкой намудрил просто.
Сразу не понял и подумал что это может такая особенность dataset. А оказалось - это такая особенность, когда невнимательно код пишешь. Спасибо большое. |
| Часовой пояс GMT +3, время: 10:28. |