Fatal编程技术网
  • javascript/
  • Javascript jQuery Mobile复选框在iOS中的性能

Javascript jQuery Mobile复选框在iOS中的性能

javascript html ios jquery-mobile

Javascript jQuery Mobile复选框在iOS中的性能,javascript,html,ios,jquery-mobile,Javascript,Html,Ios,Jquery Mobile,我正在使用jQuery mobile开发一个web应用程序。在一个页面中有一些手风琴，每个手风琴由复选框列表组成。第一个复选框是“全选”复选框，选中该复选框时，将选中相应手风琴中的所有复选框，如果未选中，将取消选中所有复选框。以下是我正在使用的示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <l

我正在使用jQuery mobile开发一个web应用程序。在一个页面中有一些手风琴，每个手风琴由复选框列表组成。第一个复选框是“全选”复选框，选中该复选框时，将选中相应手风琴中的所有复选框，如果未选中，将取消选中所有复选框。以下是我正在使用的示例代码：

<!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>


jQuery移动复选框
手风琴1
全选
复选框#0
复选框#1
复选框#2
复选框#3
复选框#4
复选框#5
复选框#6
复选框#7
复选框#8
复选框#9
复选框#10
复选框#11
手风琴2
全选
复选框#0
复选框#1
复选框#2
复选框#3
复选框#4
复选框#5
复选框#6
复选框#7
复选框#8
复选框#9
复选框#10
复选框#11
复选框#12
函数绑定复选框（）{
$（“输入[type='checkbox']”）。绑定（“更改”，函数（事件，用户界面）{
var$uiElement=$（event.target）.parent（）；
var checkBoxParent=$uiElement.parent（）[0]；
如果（event.target.className=='selectAll'）{
if（event.target.checked）{
$（checkBoxParent.find（'.selectAll'）.attr（“checkedCount”，$（checkBoxParent.find”（“输入[类型='复选框]）））。长度-1）；
$（checkBoxParent）.find（“输入[type='checkbox']”）。每个（函数（索引，元素）{
$（元素）.prop（'checked'，true.）.checkboxradio（'refresh'）；
});
}否则{
$（checkBoxParent）.find（“输入[type='checkbox']”）。每个（函数（索引，元素）{
$（元素）.prop（'checked'，false.）.checkboxradio（'refresh'）；
});
$（checkBoxParent）.find（'.selectAll'）.attr（“checkedCount”，0）；
}
}否则{
if（event.target.checked）{
var checkboxScont=$（checkBoxParent）.find（“输入[类型='复选框]”）.length；
if（$（checkBoxParent）.find（'.selectAll'）.attr（“checkedCount”）+“”=“未定义”）{
$（checkBoxParent.find（'.selectAll'）.attr（“checkedCount”，1）；
}否则{
temp=$（checkBoxParent.find（'.selectAll'）.attr（“checkedCount”）；
$（checkBoxParent）.find（'.selectAll'）.attr（“checkedCount”，Number（temp）+1）；
checkedCount=$（checkBoxParent）.find（'.selectAll'）.attr（“checkedCount”）；
log（“checkedCount:+checkedCount”）；
if（checkedCount==checkboxescont-1）{
$（checkBoxParent）.find（'.selectAll'）.prop（'checked'，true.）.checkboxradio（'refresh'）；
}
}
}否则{
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（）；
事件。stopImmediatePropagation（）；
});
}
$（文档）.on（'pageinit'，函数（）{
绑定复选框（）；
});
这需要托管在共享点环境中。当通过android、chrome或mozilla firefox访问该站点时，性能良好。但当通过iPhone5和iOS 7.0.4进行访问时，性能非常差。单击复选框时，需要5秒以上的时间才能反映UI中的更改。复选框和手风琴是动态生成的。复选框的数量越多，性能越差

请帮助提高性能。提前感谢。

减少悬停延迟解决了性能问题：

$.mobile.hoverDelay = 100;
我刚刚测试了iPhone5上提供的代码，性能很好。无论如何，你的代码太复杂了，你只需要几行而不是更多，检查这个