Question

所以我在我的网站上工作，我在滚动上添加了一个打字机效果，它将在页面的一个部分工作，当我去复制下一部分的代码时，关于脚本的执行它会给出错误。

这是整个脚本：

<script type="text/javascript">
            $(window).scroll(function() {
                s = $("body").scrollTop();
                h = 150;
                console.log(s);
                if(s>150)
                {
                    text1.ready();
                }
                if(s>600)
                {
                    text2.ready();
                }
            });

            $(document).ready(function(){

            });
            var text1 = {
                counter:0,
                count:0,
                value:"",
                subvalue:"",
                start:0,
                ready:function()
                {

                    if(text1.start==0)
                    {
                        text1.start = 1;
                        data_text = $(".data-text");
                        data_text.css({left:0, opacity:1});
                        text1.counter = $(".data-text").data("text").length-34;
                        console.log(text1.counter);
                        text1.value = $(".data-text").data("text");
                        var str = text1.value;
                        text1.subvalue = str.substr(0,34);
                        data_text.html(text1.subvalue).append('<span class="cursor">|</span>');
                        var text1_engine = setInterval(function(){
                                if(text1.counter>0)
                                {
                                    text1.counter = text1.counter-1;
                                    text1.count = text1.count+1;
                                    text1.subvalue = str.substr(0, 34)+str.substr(34,text1.count);
                                    data_text.html(text1.subvalue).append('<span class="cursor">|</span>');
                                }
                                else
                                {
                                    //text1 = false;
                                    clearInterval(text1_engine);
                                    console.log(1);
                                }
                        }, 50);
                    }
                }

            };
            var text2 = {
                counter:0,
                count:0,
                value:"",
                subvalue:"",
                start:0,
                ready:function()
                {
                    if(text2.start==0)
                    {
                        text2.start = 1;
                        steps_text = $(".steps-text");
                        steps_text.css({left:0, opacity:1});
                        text2.counter = $(".steps-text").data("text").length-34;
                        console.log(text2.counter);
                        text2.value = $(".steps-text").data("text");
                        var str = text2.value;
                        text2.subvalue = str.substr(0,34);
                        steps_text.html(text2.subvalue).append('<span class="cursor">|</span>');
                        var text_engine = setInterval(function(){
                                if(text2.counter>0)
                                {
                                    text2.counter = text2.counter-1;
                                    text2.count = text2.count+1;
                                    text2.subvalue = str.substr(0, 34)+str.substr(34,text2.count);
                                    steps_text.html(text2.subvalue).append('<span class="cursor">|</span>');
                                }
                                else
                                {
                                    //text2 = false;
                                    clearInterval(text2_engine);
                                    console.log(1);
                                }
                        }, 50);
                    }
                }

            };

以下是适用于text1的HTML：

<h1 class="data-text" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu odio massa nunc."></h1>

现在在另一部分我的text2无效：

<h1 class="steps-text" steps-text="Integer sit am..."></h1>

这是我得到的错误：

(index):140 Uncaught TypeError: Cannot read property 'length' of undefined

Answer 1

我能够通过将其切换为attr（“CLASS”）或给它自己的标签来解决这个问题：

var text2 = {
                counter:0,
                count:0,
                value:"",
                subvalue:"",
                start:0,
                ready:function()
                {
                    if(text2.start==0)
                    {
                        text2.start = 1;
                        data_stext = $(".data-stext");
                        data_stext.css({left:0, opacity:1});
                        text2.counter = $(".data-stext").data('stext').length-4;
                        console.log(text2.counter);
                        text2.value = $(".data-stext").data('stext');
                        var str = text2.value;
                        text2.subvalue = str.substr(0,4);
                        data_stext.html(text2.subvalue).append('<span class="cursor">|</span>');
                        var text2_engine = setInterval(function(){
                                if(text2.counter>0)
                                {
                                    text2.counter = text2.counter-1;
                                    text2.count = text2.count+1;
                                    text2.subvalue = str.substr(0, 4)+str.substr(4,text2.count);
                                    data_stext.html(text2.subvalue).append('<span class="cursor">|</span>');
                                }
                                else
                                {
                                    //text2 = false;
                                    clearInterval(text2_engine);
                                    console.log(2);
                                }
                        }, 50);
                    }
                }

            };

并且：

<h1 class="data-stext" data-stext="How It Works..."></h1>

在滚动上创建打字机效果。一节可行，另一节则不行！ JavaScript，HTML，CSS

1 个答案: