JavaScript 变量不会随 var++ 增加

Question

在我制作的一个小网站上- click here如果你想看的话。

无论如何，使用 jQuery，当你向下滚动时，你会被拉回来，顶部的文本发生变化，一个变量增加。根据变量的值，顶部的文本会相应更改。这里的问题是数字不会进一步改变。它只显示第一个文本，如果变量等于 1，但不超过。这是带有一些注释的代码来表达我的意思。

FUN = 0; //Does not have "var" so it can be global to the following function
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
         FUN++; //Adds one to FUN variable.
         if(FUN==1){ //This stuff here executes just fine.
         scream.playclip(); //This also works too; don't worry.
         $("#text").replaceWith( "<h1>You should not have done that.</h1><br><img src='sck1.jpg'>" );
         } else if(FUN==2){ //This doesn't happen.
         $("#text").replaceWith( "<h1>Last chance to close the page.</h1>" );
         }
       $('html, body').animate({ scrollTop: 0 }, 'fast'); //This works- this is the thing that yanks the user's screen back up.
    }
};

编辑:这打破了它......谢谢@Fabian。

     console.log(FUN + " before ++")
     FUN++;
     console.log(FUN + " after ++")

Answer 1

实际上，变量 fun 正在增加。您的问题与您使用 jQuery 的 replaceWith 函数有关。您正在用文本 ID 替换 h1，因此 jQuery 无法在第二次运行时替换它。

这是一个工作演示。 http://codepen.io/StuffieStephie/pen/WpvyjJ

还有一个关于 jQuery's replaceWith() and html() 之间的区别的好问题。

你可以改变

$("#text").replaceWith("<h1>You should not have done that.</h1><br><img src='sck1.jpg'>");

到

$("#text").replaceWith("<h1 id='test'>You should not have done that.</h1><br><img src='sck1.jpg'>");

(注意 test 的 ID)或使用更改您的 html 以拥有一个 ID 为 test 的 div 并使用 jQuery 的 .html() 函数代替。

var FUN = 0;
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
         console.log(FUN + " before ++");
         FUN++;
         console.log(FUN + " after ++");
         beSpook(FUN);
       $('html, body').animate({ scrollTop: 0 }, 'fast');
    }
};



function beSpook(count){
  if (count ===1){
    console.log(count);
    scream.playclip(); 
    $("#text").html( "<h1>You should not have done that.</h1><br><img src='http://pointlessgame.x10.bz/scroller/sck1.jpg'>" );
  } else if ( count >= 2){
    $("#text").html( "<h1>Last chance to close the page.</h1>" );       
  }
}

    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
    var scream  = ss_soundbits('http://soundbible.com/grab.php?id=1627&type=mp3');

.color_heavy_red{ color: #FF1F1F;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
<h1 class="color_heavy_red" >
Can't get to the bottom of this page.
</h1>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>