每个div在其他HTML文件上生成不同的内容

Question

我正在做我的毕业工作，我有一个人体的svg图像，其中有许多肌肉，老师告诉我，而不是为每个肌肉创建许多HTML文件，上面有练习，我应该做一个代码，它根据我点击的肌肉生成特定的练习。我创建了这个代码，但它似乎忽略了我点击一个肌肉并写下所有练习的事实。

index . html:

<div id="trigger1" class="muscle">Rameno</div>
<div id="trigger2" class="muscle">Biceps</div>
<script src="main.js"></script>

workout.html:

<div class="exercise" data-muscle="trigger1">
<h2>Exercise for shoulder 1</h2>
</div>
<div class="exercise" data-muscle="trigger1">
<h2>Exercise for shoulder 2</h2>
</div>
<div class="exercise" data-muscle="trigger2">
<h2>Exercise for biceps 1</h2>
</div>
<div class="exercise" data-muscle="trigger2">
<h2>Exercise for biceps 2</h2>
</div>
<script src="main.js"></script>

main.js:

for (let i = 1; i <= 2; i++) {
const muscle = document.querySelector('#trigger' + i);
muscle.addEventListener('click', saveSelectedMuscle);
}
function saveSelectedMuscle(event) {
const muscle = event.target;
const muscleId = muscle.id;
localStorage.setItem("selectedMuscle", muscleId);
window.location.href = "workout.html";
}
let muscleId = localStorage.getItem("selectedMuscle");
const exercises = document.querySelectorAll('.exercise');
exercises.forEach(exercise => {
exercise.style.display = 'none';
if (exercise.getAttribute('data-muscle') === muscleId) {
exercise.style.display = 'block';
}
});

Answer 1

可能有几个原因-如果您使用纯html文件，并直接打开它们(即不是从任何类型的服务器，而是使用file://协议)，localStorage可能不会像您期望的那样工作(每个页面都会被视为来自不同的域，并且本地存储不会被共享)。

如果你在服务器上这样做，这可能是一个时间问题-因为你所有的代码都在main.js内。

删除:

let muscleId = localStorage.getItem("selectedMuscle");
const exercises = document.querySelectorAll('.exercise');
exercises.forEach(exercise => {
exercise.style.display = 'none';
if (exercise.getAttribute('data-muscle') === muscleId) {
exercise.style.display = 'block';
}
});

从你的main.js文件，并把它放在workout.html，像这样:

<div class="exercise" data-muscle="trigger1">
<h2>Exercise for shoulder 1</h2>
</div>
<div class="exercise" data-muscle="trigger1">
<h2>Exercise for shoulder 2</h2>
</div>
<div class="exercise" data-muscle="trigger2">
<h2>Exercise for biceps 1</h2>
</div>
<div class="exercise" data-muscle="trigger2">
<h2>Exercise for biceps 2</h2>
</div>
<script src="main.js"></script>
<script>
let muscleId = localStorage.getItem("selectedMuscle");
const exercises = document.querySelectorAll('.exercise');
exercises.forEach(exercise => {
exercise.style.display = 'none';
if (exercise.getAttribute('data-muscle') === muscleId) {
exercise.style.display = 'block';
}
});
</script>

你甚至可以避免在workout.html中使用main.js，因为剩下的内容对workout.html的内容没有影响(除非你的实际情况和代码与你的问题中看到的完全不同)。