我正在使用一个包含很多 jquery 滑块的页面。在 Chrome、Firefox、Safari 中一切正常……但有时它在 Internet Explorer 中不起作用。有时我的意思是它真的是随机的。这真的很奇怪。大多数时候我得到所有的滑块，有时我没有得到，有时得到一些滑块。
这是一个 ASP.NET MVC 3 项目，我正在使用一个带有多个 EditorTemplate 的视图。视图内和编辑器模板内有 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 Editor模板
@{
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">
</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>
矩阵能力编辑器模板
<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 Editor模板
<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">
</div>
<div id="@Model.ItemId" class="slider">
</div>
@Html.HiddenFor(m=>Model.ItemId)
@Html.HiddenFor(m => Model.Score)
</div>
编辑
这是一个屏幕截图。可以看到生成了几个滑块，但是在 3 之后突然就不行了。
按F5后，它显示了这个。从一开始就应该如此。
这是“实时”代码的一页。
<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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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>
希望你们能帮助我。因为我不知道该尝试什么了。
亲切的问候蒂姆