在使用其他浏览器(如Mozilla和Chrome)时,我的JQuery代码无法在Internet Explorer中运行

时间:2014-04-22 11:31:39

标签: jquery html css

在此代码中,JQuery代码在Internet Explorer中无效,而在Firefox和Chrome上运行时 //alert($('input[type="text"]').eq(0).val());  这个警报在这里没有显示为什么?

<html>
<head>
    <style>
        div {
            border: 2px solid blue;
        }
        .a {
            color: red
        }
        .b {
            background-color: green;
        }
        .c {
            font-size: 55px;
        }
    </style>
</head>

<body>
    <div id="container">this is my div
        <input type="text" value="50" name="first_input">first label</input>
        <button>first button</button>
        <input type="text">second label</input>
        <input type="text">third label</input>
        <input type="text">fourth label</input>
        <button>second button</button>
        <input type="text">fifth label</input>
        <button>third button</button>
        <input type="text">sixth label</input>
        <button>fourth button</button>
        <input type="text">seventh label</input>
        <button>fifth button</button>
        <button>sixth button</button>
        <button id="ss">seventh button</button>
        <label id="lbl1">hello</label>
    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('input:text').eq(0).attr({
                title: 'please input the value',
                placeholder: 'insert a value',
                name: 'input_type',
                //value:25
            });
            $('#ss').click(function () {
                <!--  alert($('input[type="text"]').get(0).value);  this is not work on I.Explorer  -->
                <!--   alert($('input[type="text"]').get(0).name);  this is not work on I.Explorer  -->
                <!--   alert($('input[type="text"]').eq(0).val());    -->
                alert($('input[type="text"]').eq(0).val()); <!-- this is not work on I.Explorer  -->
            });
        });
    </script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

$('input:text').eq(0).attr({
                title: 'please input the value',
                placeholder: 'insert a value',
                name: 'input_type', <- ERROR HERE
                //value:25
            });

不要在最后一个属性中添加逗号(,)。 IE不支持这一点。 所以删除那个逗号并尝试我认为它将正常工作..一切顺利。

也可以更改输入语法。

正确的语法是:<input *attributelist* />

例如

 <input type="text" value="50" name="first_input" />

- 一个良好的代码习惯。

<强>已更新

<div id="container">this is my div
    <input type="text" value="50" name="first_input" />
        <button>first button</button>
        <input type="text" />second label
        <input type="text" />third label
        <input type="text" />fourth label
        <button>second button</button>
        <input type="text" />fifth label
        <button>third button</button>
        <input type="text" />sixth label
        <button>fourth button</button>
        <input type="text" />seventh label
        <button>fifth button</button>
        <button>sixth button</button>
        <button id="ss">seventh button</button>
        <label id="lbl1">hello</label>
    </div>
$(document).ready(function(){
    $('input:text').eq(0).attr({
                    title: 'please input the value',
                    placeholder: 'insert a value',
                    name: 'input_type',
                    value:25
                });
    $('#ss').click(function () {
                   alert($('input[type="text"]').get(0).value);  
                });
});

FIDDLE