Internet Explorer 不会显示范围滑块或将 CSS 更新为 jquery

Question

我有一个 HTML5 范围滑块，上面有一个 div id="text_output"。 div 从 css display: none; 开始，我在移动滑块时将 css 更新为 display: block;。我还更新了 div 中的文本以显示滑块值。简单吧？

尽我所能，我在让 IE 显示范围和更新 div 时遇到问题（我正在测试版本 11）。我添加了 <meta http-equiv="x-ua-compatible" content="IE=edge">，因为当我检查开发工具菜单时它默认呈现为 IE7（那是什么？！）。然而，IE 仍然不会显示范围滑块，而是选择显示某种 textarea。这是一个可以粘贴的最小工作 html 文档，它在 Firefox 和 Chromium 中提供了所需的输出，并重现了当我的 PC 和同事的 PC 从我的网络服务器访问时所描述的问题。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <style>
            #text_output {
                display: none;
            }
        </style>
    </head>

    <body>
    <div id="text_output">Blah</div>
    <input id="range_test" name="score" type="range" min="1" max="3" value="2">

    <script>
$("#range_test").on("input", function(){
    //note that plus '+' casts as an int. Otherwise switch block uses === type comparison
    //on slider value (which is passed as a string) and fails
    switch( +$("#range_test").val() ){
        case 1:
            $("#text_output").css("display", "block");
            $("#text_output").text("text1");
            break;
        case 2:
            $("#text_output").css("display", "block");
            $("#text_output").text("text2");
            break;
        case 3:
            $("#text_output").css("display", "block");
            $("#text_output").text("text3");
            break;
    }
});

    </script>

    </body>
</html>

我曾尝试将 Daniel Stern 的 range.css 内联生成的 css 粘贴到样式块中以防出现样式问题，但这并没有改变任何内容。

有人知道为什么这在 IE 中不起作用吗？

Answer 1

如果我将 on("input" 替换为 on("change"，它在 IE11 中对我来说工作正常。

http://codepen.io/jeremythille/pen/NPzVXb

on("input" 不会触发 console.log("changed")，但 on("change" 会触发。即使我在滑动时没有释放鼠标按钮，该值也会不断更新。

Edit ：例如，您可以通过缓存 $textOutput = $("#text_output") 来大幅提高性能。

Answer 2

埃舍尔，

我在本地对此进行了测试，文档默认使用较旧的 IE 版本。如果您在脚本包含之前移动元标记，请参见下文，这将解决您的 IE 版本问题。至于你的其他问题，不幸的是我无法在我当前的 PC 上重现 - 我无法访问支持愤怒滑块的 IE 版本。我怀疑您的问题可能与元标记位置错误有关。

     <head>

        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <style>
            #text_output {
                display: none;
           }
        </style>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    </head>

Internet Explorer 不会显示范围滑块或将 CSS 更新为 jquery

Internet Explorer won't display range slider or update CSS with jquery

html

css

jquery

internet-explorer

range