0
我正在開發一個使用jQuery mobile的web應用程序。在頁面中有一些手風琴，每個手風琴由複選框列表組成。第一個複選框是「選擇全部」複選框，選中相應手風琴中的所有複選框時，如果未選中所有複選框將被選中。以下是我正在使用的示例代碼：iOS中的jQuery Mobile複選框性能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>
jQuery Mobile Checkboxes</h1>
</div>
<div data-role="content">
<form>
<div data-role='collapsible' data-iconpos='right' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' data-corners='false' data-theme='c' data-content-theme='d' id="acc1">
<h3>
Accordian 1</h3>
<div data-role='fieldcontain'>
<fieldset data-role='controlgroup'>
<label>
<input type='checkbox' class='selectAll' class='custom' />Select All</label>
<input id="checkbox0" name="checkbox0" type="checkbox">
<label for="checkbox0">Checkbox# 0</label>
<input id="checkbox1" name="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox# 1</label>
<input id="checkbox2" name="checkbox2" type="checkbox">
<label for="checkbox2">Checkbox# 2</label>
<input id="checkbox3" name="checkbox3" type="checkbox">
<label for="checkbox3">Checkbox# 3</label>
<input id="checkbox4" name="checkbox4" type="checkbox">
<label for="checkbox4">Checkbox# 4</label>
<input id="checkbox5" name="checkbox5" type="checkbox">
<label for="checkbox5">Checkbox# 5</label>
<input id="checkbox6" name="checkbox6" type="checkbox">
<label for="checkbox6">Checkbox# 6</label>
<input id="checkbox7" name="checkbox7" type="checkbox">
<label for="checkbox7">Checkbox# 7</label>
<input id="checkbox8" name="checkbox8" type="checkbox">
<label for="checkbox8">Checkbox# 8</label>
<input id="checkbox9" name="checkbox9" type="checkbox">
<label for="checkbox9">Checkbox# 9</label>
<input id="checkbox10" name="checkbox10" type="checkbox">
<label for="checkbox10">Checkbox# 10</label>
<input id="checkbox11" name="checkbox11" type="checkbox">
<label for="checkbox11">Checkbox# 11</label>
</fieldset>
</div>
</div>
<div data-role='collapsible' data-iconpos='right' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' data-corners='false' data-theme='c' data-content-theme='d' id="acc2">
<h3>
Accordian 2</h3>
<div data-role='fieldcontain'>
<fieldset data-role='controlgroup'>
<label>
<input type='checkbox' class='selectAll' class='custom' />Select All</label>
<input id="checkbox100" name="checkbox0" type="checkbox">
<label for="checkbox0">Checkbox# 0</label>
<input id="checkbox101" name="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox# 1</label>
<input id="checkbox102" name="checkbox2" type="checkbox">
<label for="checkbox2">Checkbox# 2</label>
<input id="checkbox103" name="checkbox3" type="checkbox">
<label for="checkbox3">Checkbox# 3</label>
<input id="checkbox104" name="checkbox4" type="checkbox">
<label for="checkbox4">Checkbox# 4</label>
<input id="checkbox105" name="checkbox5" type="checkbox">
<label for="checkbox5">Checkbox# 5</label>
<input id="checkbox106" name="checkbox6" type="checkbox">
<label for="checkbox6">Checkbox# 6</label>
<input id="checkbox107" name="checkbox7" type="checkbox">
<label for="checkbox7">Checkbox# 7</label>
<input id="checkbox108" name="checkbox8" type="checkbox">
<label for="checkbox8">Checkbox# 8</label>
<input id="checkbox109" name="checkbox9" type="checkbox">
<label for="checkbox9">Checkbox# 9</label>
<input id="checkbox110" name="checkbox10" type="checkbox">
<label for="checkbox10">Checkbox# 10</label>
<input id="checkbox111" name="checkbox11" type="checkbox">
<label for="checkbox11">Checkbox# 11</label>
<input id="checkbox112" name="checkbox12" type="checkbox">
<label for="checkbox12">Checkbox# 12</label>
</fieldset>
</div>
</div>
</form>
</div>
<div data-role="footer">
<h4>
</h4>
</div>
</div>
<script>
function bindCheckBoxes() {
$("input[type='checkbox']").bind("change", function (event, ui) {
var $uiElement = $(event.target).parent();
var checkBoxParent = $uiElement.parent()[0];
if (event.target.className === 'selectAll') {
if (event.target.checked) {
$(checkBoxParent).find('.selectAll').attr("checkedCount", $(checkBoxParent).find("input[type = 'checkbox']").length - 1);
$(checkBoxParent).find("input[type = 'checkbox']").each(function (index, element) {
$(element).prop('checked', true).checkboxradio('refresh');
});
} else {
$(checkBoxParent).find("input[type = 'checkbox']").each(function (index, element) {
$(element).prop('checked', false).checkboxradio('refresh');
});
$(checkBoxParent).find('.selectAll').attr("checkedCount", 0);
}
} else {
if (event.target.checked) {
var checkBoxesCount = $(checkBoxParent).find("input[type = 'checkbox']").length;
if ($(checkBoxParent).find('.selectAll').attr("checkedCount") + "" == "undefined") {
$(checkBoxParent).find('.selectAll').attr("checkedCount", 1);
} else {
temp = $(checkBoxParent).find('.selectAll').attr("checkedCount");
$(checkBoxParent).find('.selectAll').attr("checkedCount", Number(temp) + 1);
checkedCount = $(checkBoxParent).find('.selectAll').attr("checkedCount");
console.log("checkedCount:" + checkedCount);
if (checkedCount == checkBoxesCount - 1) {
$(checkBoxParent).find('.selectAll').prop('checked', true).checkboxradio('refresh');
}
}
} else {
if ($(checkBoxParent).find('.selectAll').isChecked) {} else {
temp = $(checkBoxParent).find('.selectAll').attr("checkedCount");
$(checkBoxParent).find('.selectAll').attr("checkedCount", Number(temp) - 1);
$(checkBoxParent).find('.selectAll').prop('checked', false).checkboxradio('refresh');
}
}
}
event.stopPropagation();
event.preventDefault();
event.stopImmediatePropagation();
});
}
$(document).on('pageinit', function() {
bindCheckBoxes();
});
</script>
</body>
</html>
這需要託管在共享點環境上。當通過android或chrome或mozilla firefox訪問網站時，性能很好。但是當通過iPhone 5和iOS 7.0.4訪問時，性能非常差。點擊複選框時，需要5秒以上才能反映用戶界面的變化。複選框和手風琴是動態生成的。複選框的數量越多，性能越差。
請幫助改善性能。提前致謝。
我只是測試提供了iPhone 5的代碼，性能優良。無論如何，你的代碼太複雜了，你只需要幾行就可以了，查看http://jsfiddle.net/Palestinian/q89t2/ – Omar