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

上面的代码会带你到卫生间的屏幕就好了： 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

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

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

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

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

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

strlen($_POST['vref'])>4

所以你在两个场景中使用相同的ID。

使用JQuery更改背景编码游戏的问题

2 个答案: