Internet Explorer给了我错误的索引jQuery

时间：2012-07-23 15:56:42

标签： jquery html indexing

我有问题。在firefox / chrome / safari中我得到了正确的索引，但在Internet Explorer中我每次都得到0。

HTML：

<div class="ui-slider-legend" style="margin-left: -24.8333px; width: 347.667px;">
  <p style="width: 49.6667px;"><a href="#">1-2 weeks</a></p>
  <p style="width: 49.6667px;"><a href="#">3-4 weeks</a></p>
  <p style="width: 49.6667px;"><a href="#">1-3 months</a></p>
  <p style="width: 49.6667px;"><a href="#">4-6 months</a></p>
  <p style="width: 49.6667px;"><a href="#">7-12+ months</a></p>
</div>

的javascript：

$('.ui-slider-legend p a').click( function () {
  alert ( $(this).parent().index() );
});

我有很少的滑块和图例/标签。每次我点击链接，我都需要父索引 - 在这种情况下（0-4）。

更新

IE 9（9.0.8112.16421 64位）
jquery 1.7.2
jquery-ui 1.8.21

所有JavaScript代码都在$(document).ready(function () { .... }

中

我的文件看起来像这样：

<html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/excite-bike/jquery-ui-1.8.21.custom.css" />
    <style type="text/css">
        form { width: 300px; }
        .ui-slider-legend p, .ui-slider-legend1 p, .ui-slider-legend2 p, .ui-slider-legend3 p { float: left; text-align: center; }
        .ui-slider-legend p a:link, .ui-slider-legend1 p a:link, .ui-slider-legend2 p a:link, .ui-slider-legend3 p a:link,
        .ui-slider-legend p a:visited, .ui-slider-legend1 p a:visited, .ui-slider-legend2 p a:visited, .ui-slider-legend3 p a:visited{
            color: #2e3470;
            text-decoration: none;
        }
        .ui-slider-legend p a:hover, .ui-slider-legend1 p a:hover, .ui-slider-legend2 p a:hover, .ui-slider-legend3 p a:hover {
            color: #666666;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script>
    $(document).ready(function () {
        $('input:radio[name="storage_type"]').change( function() { changeType (); });

        var select1 = $( "#size_1" );
        var slider1 = $( "<div id='slider1'></div>" ).insertAfter( select1 ).slider({
            min: 1,
            max: 5,
            range: "min",
            value: select1[ 0 ].selectedIndex + 1,
            slide: function( event, ui ) {
                select1[ 0 ].selectedIndex = ui.value - 1;
            }
        });
        var options1 = select1.children().map(function () { return $( this ).text(); }).get();
        var width1 = slider1.width() / (options1.length - 1);
        var legend_w1 = width1 * options1.length;
        slider1.after('<div class="ui-slider-legend1" style="margin-left:-' + width1/2 + ';"><p style="width:' + width1 + 'px;"><a href="#">' + options1.join('</p><p style="width:' + width1 + 'px;">') +'</a></p></div>');
        $('.ui-slider-legend1').css("width",legend_w1 + "px");
        select1.change(function() { slider1.slider( "value", this.selectedIndex + 1 ); });
        $('.ui-slider-legend1 p a').click( function () { alert ( $(this).parent().index() );
            slider1.slider( "value", $(this).parent().index() + 1 );
            $("#size_1 option:eq(" + $(this).parent().index() + ")").attr("selected", "selected");
        });


        var select2 = $( "#size_2" );
        var slider2 = $( "<div id='slider2'></div>" ).insertAfter( select2 ).slider({
            min: 1,
            max: 5,
            range: "min",
            value: select2[ 0 ].selectedIndex + 1,
            slide: function( event, ui ) {
                select2[ 0 ].selectedIndex = ui.value - 1;
            }
        });
        var options2 = select2.children().map(function () { return $( this ).text(); }).get();
        var width2 = slider2.width() / (options2.length - 1);
        var legend_w2 = width2 * options2.length;
        slider2.after('<div class="ui-slider-legend2" style="margin-left:-' + width2/2 + ';"><p style="width:' + width2 + 'px;"><a href="#">' + options2.join('</p><p style="width:' + width2 + 'px;">') +'</a></p></div>');
        $('.ui-slider-legend2').css("width",legend_w2 + "px");
        select2.change(function() { slider2.slider( "value", this.selectedIndex + 1 ); });
        $('.ui-slider-legend2 p a').click( function () { alert ( $(this).parent().index() );
            slider2.slider( "value", $(this).parent().index() + 1 );
            $("#size_2 option:eq(" + $(this).parent().index() + ")").attr("selected", "selected");
        });

        var select3 = $( "#size_3" );
        var slider3 = $( "<div id='slider3'></div>" ).insertAfter( select3 ).slider({
            min: 1,
            max: 4,
            range: "min",
            value: select3[ 0 ].selectedIndex + 1,
            slide: function( event, ui ) {
                select3[ 0 ].selectedIndex = ui.value - 1;
            }
        });
        var options3 = select3.children().map(function () { return $( this ).text(); }).get();
        var width3 = slider3.width() / (options3.length - 1);
        var legend_w3 = width3 * options3.length;
        slider3.after('<div class="ui-slider-legend3" style="margin-left:-' + width3/2 + ';"><p style="width:' + width3 + 'px;"><a href="#">' + options3.join('</p><p style="width:' + width3 + 'px;">') +'</a></p></div>');
        $('.ui-slider-legend3').css("width",legend_w3 + "px");
        select3.change(function() { slider3.slider( "value", this.selectedIndex + 1 ); });
        $('.ui-slider-legend3 p a').click( function () { alert ( $(this).parent().index() );
            slider3.slider( "value", $(this).parent().index() + 1 );
            $("#size_3 option:eq(" + $(this).parent().index() + ")").attr("selected", "selected");
        });

        var select = $( "#h_long" );
        var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
            min: 1,
            max: 7,
            range: "min",
            value: select[ 0 ].selectedIndex + 1,
            slide: function( event, ui ) {
                select[ 0 ].selectedIndex = ui.value - 1;
            }
        });
        var options = select.children().map(function () { return $( this ).text(); }).get();
        var width = slider.width() / (options.length - 1);
        var legend_w = width * options.length;
        slider.after('<div class="ui-slider-legend" style="margin-left:-' + width/2 + ';"><p style="width:' + width + 'px;"><a href="#">' + options.join('</p><p style="width:' + width + 'px;">') +'</a></p></div>');
        $('.ui-slider-legend').css("width",legend_w + "px");
        select.change(function() { slider.slider( "value", this.selectedIndex + 1 ); });
        $('.ui-slider-legend p a').click( function () { alert ( $(this).parent().index() );
            slider.slider( "value", $(this).parent().index() + 1 );
            $("#h_long option:eq(" + $(this).parent().index() + ")").attr("selected", "selected");
        });

        changeType ();
    });


    function changeType () {
        if ($('#st_personal').is(':checked')) {
            $('#pers').css("display","block");
            $('#busi').css("display","none");
            $('#stud').css("display","none");
        }
        else if ($('#st_business').is(':checked')) {
            $('#pers').css("display","none");
            $('#busi').css("display","block");
            $('#stud').css("display","none");
        }
        else if ($('#st_student').is(':checked')) {
            $('#pers').css("display","none");
            $('#busi').css("display","none");
            $('#stud').css("display","block");
        }
        else {
            $('#st_personal').attr('checked', true);
            $('#pers').css("display","block");
            $('#busi').css("display","none");
            $('#stud').css("display","none");
        }
    }

    </script>
</head>
<body>

<form action="[[~29]]" method="post">
    <div>
        <input type="radio" name="storage_type" id="st_personal" value="personal" /> <label for="st_personal" style="cursor: pointer;">Personal</label> &nbsp; &nbsp; <br />
        <input type="radio" name="storage_type" id="st_business" value="business" /> <label for="st_business" style="cursor: pointer;">Business</label> &nbsp; &nbsp; <br />
        <input type="radio" name="storage_type" id="st_student" value="student" /> <label for="st_student" style="cursor: pointer;">Student</label>
    </div>

    <br /><br />
    <div id="pers">
        Select your storage size: 1<br />
        <select name="size1" id="size_1">
            <option value="XS">XS</option>
            <option value="S">S</option>
            <option value="M">M</option>
            <option value="L">L</option>
            <option value="XL">XL</option>
        </select>
        <!--<div id="size_1"></div>--><br /><br /></div>
    <div id="busi">
        Select your storage size: 2<br />
        <select name="size2" id="size_2">
            <option value="S">S</option>
            <option value="M">M</option>
            <option value="L">L</option>
            <option value="XL">XL</option>
            <option value="XXL">XXL</option>
        </select>
        <!--<div id="size_2"></div>--><br /><br /></div>
    <div id="stud">
        Select your storage size: 3<br />
        <select name="size3" id="size_3">
            <option value="XS">XS</option>
            <option value="S">S</option>
            <option value="M">M</option>
            <option value="L">L</option>
        </select>
        <!--<div id="size_3"></div>--><br /><br /></div>
    <div>
        How long do you need storage?<br />
        <select name="h_long" id="h_long">
            <option value="1-2 weeks">1-2 weeks</option>
            <option value="4 weeks">4 weeks</option>
            <option value="6 weeks">6 weeks</option>
            <option value="8-12 weeks">8-12 weeks</option>
            <option value="3-6 mths">3-6 mths</option>
            <option value="6-12 mths">6-12 mths</option>
            <option value="1 yr+">1 yr+</option>
        </select><br />
        <!--<div id="h_long"></div>--><br /><br /></div>
    <div><input type="submit" name="go" id="go" value="Go!" /></div>
</form>

</body>
</html>

我没有把所有的meta标签放在因为它的临时文件，javascript代码将用在主网站和html的一小部分。

0 个答案:

没有答案
相关问题
最新问题