用JQuery发布背景变化的编码游戏

Question

我正在创建一个交互式恐怖叙事网站，在这里你可以探索一所房子，并在途中找到笔记。我使用JQuery对其进行编码，以在单击圆形图标时更改背景并移动界面元素。

接口示例。

我已经遇到一点小问题了。我有一个设置，你点击一个要去的地方，它会改变背景、按钮的类别和位置，比如这个进入浴室的例子：

HTML:

<div id="background">
   <div id="nav_btn1" class="bathroom"></div>
   <div id="nav_btn2" class="upstairs"></div>
   <div id="nav_btn3" class="kitchen"></div>
   <div id="nav_btn4" class="living_room"></div>
</div>

JQuery:

$(".bathroom").click(function() {
    clickCount += 1;
    $("#background").css("background", "url(images/backgrounds/bathroom.jpg) no-repeat");
    $("#nav_btn1").css("top", "500px");
    $("#nav_btn1").css("left", "450px");
    $("#nav_btn1").removeClass("bathroom").addClass("entrance");
    $("#nav_btn2").css("top", "-99999px");
    $("#nav_btn2").css("right", "-99999px");
    $("#nav_btn3").css("top", "-99999px");
    $("#nav_btn3").css("left", "-99999px");
    $("#nav_btn4").css("top", "-99999px");
    $("#nav_btn4").css("left", "-99999px");
});

上面的代码会把你带到浴室屏幕上：浴室屏幕

我试着让底部的按钮，它的类别现在已经改为"入口"，带你回到你看到的第一个屏幕，用这个简单的代码：

$(".entrance").click(function() {
    clickCount += 1;
    $("#background").css("background", "url(images/backgrounds/entrance.jpg)");
    $("#nav_btn1").css("top", "250px");
    $("#nav_btn1").css("left", "140px");
    $($(this)).removeClass("bathroom").addClass("entrance");
    $("#nav_btn2").css("top", "250px");
    $("#nav_btn2").css("right", "250px");
    $("#nav_btn2").attr("class", "upstairs");
    $("#nav_btn3").css("top", "125px");
    $("#nav_btn3").css("left", "270px");
    $("#nav_btn3").attr("class", "kitchen");
    $("#nav_btn4").css("top", "125px");
    $("#nav_btn4").css("left", "375px");
    $("#nav_btn4").attr("class", "living_room");
});

然而，这对我不起作用，我仍然被困在浴室里。

我很讨厌JQuery，不知道自己在做什么，哈哈。如果你们中的一位JQuery大师知道如何实现这个简单的小函数，这样我就不会在未来遇到这个错误，那将是非常棒的。也可以随意分享任何解决方案，以任何更简单的方式设置此代码。在你的帮助下，我将能够全速完成这个项目。

Answer 1

添加事件处理程序时，它只会在绑定时添加到与给定选择器匹配的元素中。

稍后更改元素选择器，使其与先前初始化的事件处理程序中给定的内容相匹配，并不能使事件处理程序神奇地工作，因为设置事件处理程序时元素不匹配。

许多解决方案之一是使用委托的事件处理程序，类似

$(document).on('click', '.entrance', function() {
    clickCount += 1;
    ...etc

另一种方法是将代码放在函数中的事件处理程序中，如

function doThings() {
    clickCount += 1;
    $("#background").css("background", "url(images/backgrounds/entrance.jpg)");
    $("#nav_btn1").css("top", "250px");
    $("#nav_btn1").css("left", "140px");
    ... etc

然后做

$(".entrance").on('click', doThings);

然后你就可以做

$(".bathroom").click(function() {
    clickCount += 1;
    $("#background").css("background", "url(images/backgrounds/bathroom.jpg) no-repeat");
    $("#nav_btn1").css("top", "500px");
    $("#nav_btn1").css("left", "450px");
    $("#nav_btn1").on('click', doThings);
    ...etc

附带说明一下，您可以设置多种样式进行

$("#nav_btn1").css({
    top     : "250px",
    left    : "140px",
    'class' : "someClass"
});

Answer 2

这是因为在第二次尝试进入入口时，您仍然引用：

$("#background").css("background", "url(images/backgrounds/bathroom.jpg) no-repeat");

因此，您对两个场景使用相同的ID。