带有范围输入的JavaScript位置问题

各位下午好

我遇到了一个JavaScript/CSS/HTML问题，让我花一分钟来解释一下

我已经为我运行的网站（）编写了一个报价系统

我遵循了一个示例，该示例使用框架集为报价创建不同的阶段，但不导航到单独的页面。这很有效

在每个字段集上，我引入了一个范围输入。我将执行一个计算，它强制用户输入一个数值

然后，我按照另一个教程介绍了一个气泡，显示范围控件的选定值

当页面加载时，它会在每个范围控件的一侧绘制气泡。然而，当我导航到第二个框架集时，所有项目的气泡都被绘制在页面的中间（不在正确的位置），并且都在上面。

当用户从范围控件中选择一个值时，气泡将在正确的位置重新绘制

当用户离开第一阶段时，我想自动重画报价第二阶段的所有气泡

我假设这是失败的，因为我重置了更改事件上的范围输入值，该值仅在用户更改值时触发

有人能给我指一下正确的方向吗

HTML

    <form id="msform" method="post" action="quoteresult.php">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Debts</li>
        <li>Assets</li>
        <li>Contact</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
        <h2 class="fs-title">What You Owe</h2>
        <h3 class="fs-subtitle">Your companys financial possition</h3>
        <label for="overdraft">Overdraft:</label>
        <input type="range" name="overdraft" id="overdraft" value=0 min=0 max=1000000 step="500" />
        <output for="overdraft">1</output>
        <label for="vat">VAT:</label>
        <input type="range" name="vat" id="vat" value=0 min=0 max=1000000 step="500" />
        <output for="vat">1</output>
        <label for="paye">PAYE:</label>
        <input type="range" name="paye" value=0 min=0 max=1000000 step="500"/>
        <output for="paye">1</output>
        <label for="corporationtax">Corporation Tax:</label>
        <input type="range" name="corporationtax" value=0 min=0 max=1000000 step="500" />
        <output for="corporationtax">1</output>
        <label for="tradecreditors">Trade Creditors:</label>
        <input type="range" name="tradecreditors" value=0 min=0 max=1000000 step="500"  />
         <output for="tradecreditors">1</output>
         <label for="rent">Rent:</label>
        <input type="range" name="rent" value=0 min=0 max=1000000 step="500" />
        <output for="rent">1</output>
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2 class="fs-title">Asset Values</h2>
        <h3 class="fs-subtitle">What are you assets worth?</h3>
        <label for="debtors">Debtors:</label>
        <input type="range" name="debtors" value=0 min=0 max=1000000 step="500" />
        <output for="debtors">1</output>
        <label for="fixtures">Fixtures:</label>
        <input type="range" name="fixtures"  value=0 min=0 max=1000000 step="500"/>
        <output for="fixtures">1</output>
        <label for="stock">Stock:</label>
        <input type="range" name="stock" value=0 min=0 max=1000000 step="500" />
        <output for="stock">1</output>
        <label for="vehicles">Vehicles:</label>
        <input type="range" name="vehicles" value=0 min=0 max=1000000 step="500" />
        <output for="vehicles">1</output>
        <label for="cash">Cash:</label>
        <input type="range" name="cash" value=0 min=0 max=1000000 step="500" />
        <output for="cash">1</output>
        <label for="plant">Plant/Machinery:</label>
        <input type="range" name="plant" value=0 min=0 max=1000000 step="500"/>
        <output for="plant">1</output>
        <label for="property">Property:</label>
        <input type="range" name="property" value=0 min=0 max=1000000 step="500" />
        <output for="property">1</output>
        <label for="other">Other:</label>
        <input type="range" name="other" value=0 min=0 max=1000000 step="500" />
        <output for="other">1</output>
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2 class="fs-title">Personal Details</h2>
        <h3 class="fs-subtitle">We will never sell it</h3>
        <input type="text" name="fname" placeholder="First Name" />
        <input type="text" name="lname" placeholder="Last Name" />
        <input type="text" name="company" placeholder="Company Name" />
        <input type="text" name="phone" placeholder="Phone" />
        <input type="text" name="email" placeholder="Email" />
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="submit" name="submit" class="submit action-button" value="Submit" />
    </fieldset>
</form>

JavaScript

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
            this.redraw();
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;

        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    document.getElementById("msform").submit();

    return false;
})

     $(function() {
       var el, newPoint, newPlace, offset, newTop;
       $("input[type='range']").change(function() {
         el = $(this);
         width = el.width();
         newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
         offset = -1.3;
         newTop = el.position().top - 10;
         newLeft = el.position().left + width + 10;
         if (newPoint < 0) { newPlace = 0;  }
         else if (newPoint > 1) { newPlace = width; }
         else { newPlace = width * newPoint + offset; offset -= newPoint;}
         el
           .next("output")
           .css({
             left: newLeft + "px",
             top: newTop + "px"
           })
           .text(el.val());
       })
       .trigger('change');
     });

//jQuery时间
var当前值、下一个值、上一个值//字段集
变量左，不透明度，比例//我们将设置动画的字段集属性
var动画//防止快速多点单击故障的标志
$（“.next”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前_fs=$（this.parent（）；
next_fs=$（this.parent（）.next（）；
//使用next_fs的索引在progressbar上激活下一步
$（“#progressbar li”）.eq（$（“字段集”）.index（next_fs））.addClass（“活动”）；
//显示下一个字段集
next_fs.show（）；
//使用样式隐藏当前字段集
当前动画（{opacity:0}{
步骤：函数（现在是mx）{
//随着当前_fs的不透明度降低到0-存储在“now”中
//1.将电流放大至80%
比例=1-（1-现在）*0.2；
//2.从右侧带下一个_fs（50%）
左=（现在是*50）+“%”；
//3.当下一个_fs移入时，将其不透明度增加到1
不透明度=1-现在；
当前的{'transform'：'scale（'+scale+'）}；
css（{'left'：left'opacity'：opacity}）；
}, 
持续时间：800，
完成：函数（）{
当前_fs.hide（）；
动画=假；
}, 
//这来自自定义的放松插件
放松：“轻松返回”
});
});
$（“.previous”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前_fs=$（this.parent（）；
previous_fs=$（this.parent（）.prev（）；
//取消激活progressbar上的当前步进
$（“#progressbar li”）.eq（$（“字段集”）.index（当前#fs））.removeClass（“活动”）；
//显示上一个字段集
先前的_fs.show（）；
//使用样式隐藏当前字段集
当前动画（{opacity:0}{
步骤：函数（现在是mx）{
//随着当前_fs的不透明度降低到0-存储在“now”中
//1.将以前的_fs从80%扩展到100%
比例=0.8+（1-现在）*0.2；
//2.将当前_fs向右移动（50%）-从0%
左=（（1-现在）*50）+“%”；
//3.移动前一个_fs时，将其不透明度增加为1
不透明度=1-现在；
当前的_fs.css（{'left'：left}）；
以前的{'transform'：'scale（'+scale+'），'opacity'：opacity}）；
这个；
}, 
持续时间：800，
完成：函数（）{
当前_fs.hide（）；
动画=假；
}, 
//这来自自定义的放松插件
放松：“轻松返回”
});
});
$（“.submit”）。单击（函数（）{
document.getElementById（“msform”）.submit（）；
返回false；
})
$（函数（）{
变量el、新点、新地、偏移量、新顶；
$（“输入[type='range']”）。更改（函数（）{
el=$（本）；
宽度=标高宽度（）；
newPoint=（el.val（）-el.attr（“最小”）/（el.attr（“最大”）-el.attr（“最小”））；
偏移量=-1.3；
newTop=el.position（）.top-10；
newLeft=el.position（）.左+宽+10；
如果（newPoint<0）{newPlace=0；}
如果（newPoint>1）{newPlace=width；}
else{newPlace=width*newPoint+offset；offset-=newPoint；}
埃尔
.next（“输出”）
.css({
左：newLeft+“px”，
顶部：newTop+“px”
})
.text（el.val（））；
})
.触发（“变更”）；
});

这不是一个建议的解决方案，但我必须发布它，这样我才能上传结果的截图。我一字不差地复制了您的HTML、CSS和JS（当然，尽管我必须适当地包装HTML），但我没有遇到您描述的错误。 我尝试使用两个不同的jQuery CDN文件：

• "
• "

以下是Firefox 29.0.1、Chrome 35、Safari 6.1.4和IE10中呈现的第二阶段“资产价值”的屏幕截图。前三个在Mac OS X 10.7.5上，后一个在运行VirtualBox/的Windows 8虚拟机上。顺序是Firefox、Chrome、Safari，即：

如您所见，除了Firefox之外，所有浏览器的渲染都在某种程度上被破坏，但您描述的bug没有出现。 我还注意到您链接到的网站： …在Firefox 29中似乎也运行良好：

是否要发布用于测试的浏览器的确切版本

---

附言

与您的问题无关，但请注意

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
            this.redraw();
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;

        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    document.getElementById("msform").submit();

    return false;
})

     $(function() {
       var el, newPoint, newPlace, offset, newTop;
       $("input[type='range']").change(function() {
         el = $(this);
         width = el.width();
         newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
         offset = -1.3;
         newTop = el.position().top - 10;
         newLeft = el.position().left + width + 10;
         if (newPoint < 0) { newPlace = 0;  }
         else if (newPoint > 1) { newPlace = width; }
         else { newPlace = width * newPoint + offset; offset -= newPoint;}
         el
           .next("output")
           .css({
             left: newLeft + "px",
             top: newTop + "px"
           })
           .text(el.val());
       })
       .trigger('change');
     });

    <label for="paye">PAYE:</label>
    <input type="range" name="paye" value=0 min=0 max=1000000 step="500"/>
    <output for="paye">1</output>
    <label for="corporationtax">Corporation Tax:</label>
    <input type="range" name="corporationtax" value=0 min=0 max=1000000 step="500" />
    <output for="corporationtax">1</output>
    <label for="tradecreditors">Trade Creditors:</label>
    <input type="range" name="tradecreditors" value=0 min=0 max=1000000 step="500"  />
    <output for="tradecreditors">1</output>
    <label for="rent">Rent:</label>
    <input type="range" name="rent" value=0 min=0 max=1000000 step="500" />

    <label for="debtors">Debtors:</label>
    <input type="range" name="debtors" value=0 min=0 max=1000000 step="500" />
    <output for="debtors">1</output>
    <label for="fixtures">Fixtures:</label>
    <input type="range" name="fixtures"  value=0 min=0 max=1000000 step="500"/>
    <output for="fixtures">1</output>
    <label for="stock">Stock:</label>
    <input type="range" name="stock" value=0 min=0 max=1000000 step="500" />
    <output for="stock">1</output>
    <label for="vehicles">Vehicles:</label>
    <input type="range" name="vehicles" value=0 min=0 max=1000000 step="500" />
    <output for="vehicles">1</output>
    <label for="cash">Cash:</label>
    <input type="range" name="cash" value=0 min=0 max=1000000 step="500" />
    <output for="cash">1</output>
    <label for="plant">Plant/Machinery:</label>
    <input type="range" name="plant" value=0 min=0 max=1000000 step="500"/>
    <output for="plant">1</output>
    <label for="property">Property:</label>
    <input type="range" name="property" value=0 min=0 max=1000000 step="500" />
    <output for="property">1</output>
    <label for="other">Other:</label>
    <input type="range" name="other" value=0 min=0 max=1000000 step="500" />