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

实际上，变量乐趣正在增加。你的问题与你使用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>

使用var ++，JavaScript变量不会增加

1 个答案: