jquery - 使用 JQuery 编写背景变化的游戏时遇到的问题

Question

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

Interface example .

我已经遇到了一些问题。我有一个设置，您点击一个要去的地方，它会更改背景以及按钮的类别和位置，就像这个进入浴室的示例:

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");
});

上面的代码将带您正常进入浴室屏幕: Bathroom screen

我尝试使用底部按钮(其类现已更改为“入口”)，使用以下简单代码将您带回到您看到的第一个屏幕:

$(".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

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

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

许多解决方案之一是使用委托(delegate)事件处理程序，例如

$(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"
});