Question

我正在使用一个包含大量jquery滑块的页面。一切正常，Chrome，Firefox，Safari，... 但有时它在Internet Explorer中不起作用。有时我的意思是它真的是随机的。真的很奇怪。大部分时间我都得到了所有的滑块，有时我得不到任何滑块，有时会得到一些滑块。

这是一个ASP.NET MVC 3项目，我正在使用一个包含多个EditorTemplates的视图。视图内部和编辑器模板中有jquery代码。（我只是提到这个，看看这可能是个问题）

之前有没有人见过这种行为？

修改

这是我的代码。

我的观点：

    <script type="text/javascript">
    $(document).ready(function () {
        $(".guideSlider").slider({
            range: "min",
            value: 0,
            min: 0,
            max: 7,
            step: 1,
            disabled: true,
            animate: true
        });
        $(".average").slider({
            range: "min",
            min: 0,
            max: 7,
            step: 0.1,
            animate: true,
            disabled: true
        });
        var current = 0;
        var currentPage = 1;
        $(".next").click(function (e) {
            e.preventDefault();
            if (submitForm(currentPage)) {
                currentPage++;
                current += 600;
                $('#wrapper').animate({
                    scrollLeft: current
                }, 1000);
            }
            return false;
        });

        $("#toOpenQuestions").click(function (e) {
            if (!submitForm(currentPage)) {
                e.preventDefault();
                return false;
            }
            return true;
        });

        $(".previous").click(function (e) {
            e.preventDefault();
            currentPage--;
            current -= 600;
            $('#wrapper').animate({
                scrollLeft: current
            }, 1000);
            return false;
        });
        $(".matrixItem .slider").bind("slidestop", function () {
            var competenceId = $(this).parents("div[id$=competence]").attr("id");
            setAverage(competenceId);
        });
        $("form").submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize()
            });
            return false;
        });
    });

    function setAverage(competenceId) {
        var counter = 0;
        var value = 0;
        $("#" + competenceId + " div.matrixItem div.slider").each(function () {
            var itemValue = $(this).slider("value");
            if (itemValue > 0) {
                counter++;
                value += itemValue;
            }
        });
        if (counter > 0)
            value = value / counter;
        $("#" + competenceId + " div.ui-state-active div.average").slider("value", value);
    }

    function submitForm(currentPage) {
        var valid = true;
        $("#page" + currentPage + " .competenceWrapper").each(function () {
            var counter = 0;
            $(this).children("div.matrixItem").children("div.slider").each(function () {
                var itemValue = $(this).slider("value");
                if (itemValue > 0) {
                    counter++;
                }
            });
            if (counter < 2) valid = false;
        });
        if (valid)
            $("#matrixForm").submit();
        else
            alert("You have to provide a score for at least 2 items per Competence");

        return valid;
    }

</script>
<style type="text/css">
    .ui-slider-handle
    {
        z-index: 101 !important;
    }
</style>
<div class="myVdp">
    <div id="wrapper">
        <div id="mask">
            @using (Html.BeginForm("Matrix", "Home", FormMethod.Post, new { id = "matrixForm" }))
            {
                @Html.HiddenFor(m => m.RequestId)
                @Html.EditorFor(m => m.Pages)
            }
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("div[id$=competence]").each(function () {
            var competenceId = $(this).attr("id");
            setAverage(competenceId);
        });
    });
</script>

MatrixPage EditorTemplate

    @{ 
    string pageId = "page" + Model.PageNumber;
    string progressBarId = "progressBar" + Model.PageNumber;
    string guideClass = (Model.PageNumber % 2 == 0) ? "normal" : "flipBg";
}
<div id="@pageId" class="item">
    <script type="text/javascript">
        $(document).ready(function () {
            var value = ((@Model.PageNumber-1)/@ViewBag.TotalPages)*100;
            $("#@progressBarId").progressbar({ value: value });
        });     
    </script>
    <div id="guideBgColor" class="@guideClass">
        <div id="guideBgImage" class="@guideClass">
            <div id="guide">
                <span id="zero">No score</span> <span id="one">High need for improvement</span>
                <span id="seven">Being a grandmaster</span>
                <div class="sliderBackground">
                    &nbsp;</div>
                <div class="slider guideSlider">
                </div>
            </div>
            <ul id="score">
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li class="lastItem">7</li>
            </ul>
        </div>
    </div>
    @{
        <div class="innerPage">
            @Html.EditorFor(m => m.MatrixCompetences)
        </div>
        <div class="progressbar" id="@progressBarId">
        </div>
        if (Model.PageNumber > 1)
        {
            string previousPage = "page" + (Model.PageNumber - 1);
        <a href="#@previousPage" class="previous">
            <img src="@Url.Content("~/Content/Images/Left.png")" alt="previous" /></a>
        }

        if (Model.PageNumber < ViewBag.TotalPages)
        {
            string nextPage = "page" + (Model.PageNumber + 1);
        <a href="#@nextPage" class="next">
            <img src="@Url.Content("~/Content/Images/right.png")" alt="next" /></a>
        }
        else
        {
        <a href="@Url.Action("MatrixOpenQuestions", "Home", new { requestId = @ViewBag.requestId })" id="toOpenQuestions">
            <img src="@Url.Content("~/Content/Images/right.png")" alt="next" /></a>
        }
    }
</div>

MatrixCompetence EditorTemplate

<script type="text/javascript">
    $(document).ready(function () {
        $("#@Model.CompetenceId.ToString()_competence .slider .ui-slider-range").css("background", "@Model.ColorHex");
        $("#@Model.CompetenceId.ToString()_competence .slider .ui-slider-handle").css("border-color", "@Model.ColorHex");
    });                     
</script>
<div id="@Model.CompetenceId.ToString()_competence" class="competenceWrapper">
    <div class="ui-state-active competence">
        <div class="competenceText">@Model.Text</div>
        <div class="slider average">
        </div>
    </div>
    @Html.EditorFor(m => Model.MatrixItems)
</div>

MatrixItem EditorTemplate

<script type="text/javascript">
    $(document).ready(function() {
        $("#@Model.ItemId").slider({
            range: "min",
            value: @Model.Score,
            min: 0,
            max: 7,
            step: 1,
            animate: true,
            slide: function(event,ui) {
                $(this).siblings("input[id$=Score]").val(ui.value);
            }
        });
        $("#@Model.ItemId  .ui-slider-range").css("background", "@Model.ColorHex");
        $("#@Model.ItemId  .ui-slider-handle").css("border-color", "@Model.ColorHex");
    });
</script>
<div class="matrixItem">
    <div class="itemText">
        @Model.Text</div>
    <div class="sliderBackground">
        &nbsp;</div>
    <div id="@Model.ItemId" class="slider">
    </div>
    @Html.HiddenFor(m=>Model.ItemId)
    @Html.HiddenFor(m => Model.Score)
</div>

修改

这是截图。您可以看到生成了一些滑块，但是在3之后它突然变得不起作用。 screenshot

按下F5后，显示此信息。从一开始就应该是这种情况。

after refresh

这是“实时”代码的一页。

<div id="page1" class="item">
    <script type="text/javascript">
        $(document).ready(function () {
            var value = ((1-1)/11)*100;
            $("#progressBar1").progressbar({ value: value });
        });     
    </script>
    <div id="guideBgColor" class="flipBg">
        <div id="guideBgImage" class="flipBg">
            <div id="guide">
                <span id="zero">No score</span> <span id="one">High need for improvement</span>
                <span id="seven">Being a grandmaster</span>
                <div class="sliderBackground">
                    &nbsp;</div>
                <div class="slider guideSlider">
                </div>
            </div>
            <ul id="score">
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li class="lastItem">7</li>
            </ul>
        </div>
    </div>
        <div class="innerPage">
            <script type="text/javascript">
    $(document).ready(function () {
        $("#1_competence .slider .ui-slider-range").css("background", "#004c97");
        $("#1_competence .slider .ui-slider-handle").css("border-color", "#004c97");
    });                     
</script>
<div id="1_competence" class="competenceWrapper">
    <div class="ui-state-active competence">
        <div class="competenceText">Structured</div>
        <div class="slider average">
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#1").slider({
            range: "min",
            value: 0,
            min: 0,
            max: 7,
            step: 1,
            animate: true,
            slide: function(event,ui) {
                $(this).siblings("input[id$=Score]").val(ui.value);
            }
        });
        $("#1  .ui-slider-range").css("background", "#004c97");
        $("#1  .ui-slider-handle").css("border-color", "#004c97");
    });
</script>
<div class="matrixItem">
    <div class="itemText">
        He is organised and works in a structured manner.</div>
    <div class="sliderBackground">
        &nbsp;</div>
    <div id="1" class="slider">
    </div>
    <input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_0__ItemId" name="Pages[0].MatrixCompetences[0].MatrixItems[0].ItemId" type="hidden" value="1" />
    <input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_0__Score" name="Pages[0].MatrixCompetences[0].MatrixItems[0].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#2").slider({
            range: "min",
            value: 0,
            min: 0,
            max: 7,
            step: 1,
            animate: true,
            slide: function(event,ui) {
                $(this).siblings("input[id$=Score]").val(ui.value);
            }
        });
        $("#2  .ui-slider-range").css("background", "#004c97");
        $("#2  .ui-slider-handle").css("border-color", "#004c97");
    });
</script>
<div class="matrixItem">
    <div class="itemText">
        He sets priorities and deadlines.</div>
    <div class="sliderBackground">
        &nbsp;</div>
    <div id="2" class="slider">
    </div>
    <input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_1__ItemId" name="Pages[0].MatrixCompetences[0].MatrixItems[1].ItemId" type="hidden" value="2" />
    <input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_1__Score" name="Pages[0].MatrixCompetences[0].MatrixItems[1].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#3").slider({
            range: "min",
            value: 0,
            min: 0,
            max: 7,
            step: 1,
            animate: true,
            slide: function(event,ui) {
                $(this).siblings("input[id$=Score]").val(ui.value);
            }
        });
        $("#3  .ui-slider-range").css("background", "#004c97");
        $("#3  .ui-slider-handle").css("border-color", "#004c97");
    });
</script>
<div class="matrixItem">
    <div class="itemText">
        He plans well in advance.</div>
    <div class="sliderBackground">
        &nbsp;</div>
    <div id="3" class="slider">
    </div>
    <input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_2__ItemId" name="Pages[0].MatrixCompetences[0].MatrixItems[2].ItemId" type="hidden" value="3" />
    <input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_2__Score" name="Pages[0].MatrixCompetences[0].MatrixItems[2].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#4").slider({
            range: "min",
            value: 0,
            min: 0,
            max: 7,
            step: 1,
            animate: true,
            slide: function(event,ui) {
                $(this).siblings("input[id$=Score]").val(ui.value);
            }
        });
        $("#4  .ui-slider-range").css("background", "#004c97");
        $("#4  .ui-slider-handle").css("border-color", "#004c97");
    });
</script>
<div class="matrixItem">
    <div class="itemText">
        He arrives on time.</div>
    <div class="sliderBackground">
        &nbsp;</div>
    <div id="4" class="slider">
    </div>
    <input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_3__ItemId" name="Pages[0].MatrixCompetences[0].MatrixItems[3].ItemId" type="hidden" value="4" />
    <input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_3__Score" name="Pages[0].MatrixCompetences[0].MatrixItems[3].Score" type="hidden" value="0" />
</div>

</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#2_competence .slider .ui-slider-range").css("background", "#004c97");
        $("#2_competence .slider .ui-slider-handle").css("border-color", "#004c97");
    });                     
</script>
<div id="2_competence" class="competenceWrapper">
    <div class="ui-state-active competence">
        <div class="competenceText">Result Oriented</div>
        <div class="slider average">
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#5").slider({
            range: "min",
            value: 0,
            min: 0,
            max: 7,
            step: 1,
            animate: true,
            slide: function(event,ui) {
                $(this).siblings("input[id$=Score]").val(ui.value);
            }
        });
        $("#5  .ui-slider-range").css("background", "#004c97");
        $("#5  .ui-slider-handle").css("border-color", "#004c97");
    });
</script>
<div class="matrixItem">
    <div class="itemText">
        He sets achievable goals/priorities.</div>
    <div class="sliderBackground">
        &nbsp;</div>
    <div id="5" class="slider">
    </div>
    <input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_0__ItemId" name="Pages[0].MatrixCompetences[1].MatrixItems[0].ItemId" type="hidden" value="5" />
    <input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_0__Score" name="Pages[0].MatrixCompetences[1].MatrixItems[0].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#6").slider({
            range: "min",
            value: 0,
            min: 0,
            max: 7,
            step: 1,
            animate: true,
            slide: function(event,ui) {
                $(this).siblings("input[id$=Score]").val(ui.value);
            }
        });
        $("#6  .ui-slider-range").css("background", "#004c97");
        $("#6  .ui-slider-handle").css("border-color", "#004c97");
    });
</script>
<div class="matrixItem">
    <div class="itemText">
        He focuses on the result.</div>
    <div class="sliderBackground">
        &nbsp;</div>
    <div id="6" class="slider">
    </div>
    <input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_1__ItemId" name="Pages[0].MatrixCompetences[1].MatrixItems[1].ItemId" type="hidden" value="6" />
    <input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_1__Score" name="Pages[0].MatrixCompetences[1].MatrixItems[1].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#7").slider({
            range: "min",
            value: 0,
            min: 0,
            max: 7,
            step: 1,
            animate: true,
            slide: function(event,ui) {
                $(this).siblings("input[id$=Score]").val(ui.value);
            }
        });
        $("#7  .ui-slider-range").css("background", "#004c97");
        $("#7  .ui-slider-handle").css("border-color", "#004c97");
    });
</script>
<div class="matrixItem">
    <div class="itemText">
        He meets his deadlines.</div>
    <div class="sliderBackground">
        &nbsp;</div>
    <div id="7" class="slider">
    </div>
    <input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_2__ItemId" name="Pages[0].MatrixCompetences[1].MatrixItems[2].ItemId" type="hidden" value="7" />
    <input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_2__Score" name="Pages[0].MatrixCompetences[1].MatrixItems[2].Score" type="hidden" value="0" />
</div>

</div>

        </div>
        <div class="progressbar" id="progressBar1">
        </div>

希望你们能帮助我。因为我不知道该怎么办了。

亲切的问候添

IE中的jQuery Slider

0 个答案: