Question

关于在移动设备上使用网络应用时按钮响应性问题的另一个主题。

我正在侦听touchend事件以触发按下单选按钮。这解决了使按钮响应更快的问题，但却产生了另一个问题。

当事件发生时，jQuery mobile应用ui-icon-radio-on，ui-radio-on，ui-btn-hvr-a，ui-btn-dwn-a等类。这使得即使事件结束，按钮看起来仍然被按下。它最终是一个体面的努力来兼顾删除和添加所有这些类，以使一切看起来正确。

我的问题是 - 是否有人有一种优雅的方式来添加和删除所需的类和属性。

或

有没有更好的方法来解决这个问题，在手动处理基于事件触发器的样式方面不会涉及“重新创建轮子”。谷歌的快捷按钮是一个更好的解决方案吗？（不知道如何整合）。有更简单的方法吗？

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function (event) {
if($(this).hasClass('AdminSurv') && event.type=='pageinit') {
    $(this).on( 'touchend', '.ui-radio', function(event) {
        event.preventDefault();

        /*uncheck all radios in control group to avoid multiple checks*/
        var _control_group = $(this).parent();
        _control_group.find("input:radio:checked").attr('checked',false);

        /*check the radio*/
        $(this).find('input').attr('checked', true);

        /*much juggling of classes/attributes going on here
          still looks like the buttons are being held down
          this is a very sloppy example of my initial attempt*/
        _control_group.find('label').removeClass('ui-radio-on');
        _control_group.find('label').removeAttr('data-icon');
        _control_group.find('label span span').removeClass('ui-icon-radio-on');

        $(this).find('label').removeClass('ui-radio-off');
        $(this).find('label').addClass('ui-radio-on');
        $(this).find('label').attr('data-icon','radio-on');

        $(this).find('label span span').removeClass('ui-icon-radio-off');
        $(this).find('label span span').addClass('ui-icon-radio-on');
    });
  }
});

Answer 1

许多jQuery Mobile小部件接受refresh方法，其中它用于增强DOM中已存在的元素的标记或动态插入。

对于复选框和单选按钮，.checkboxradio('refresh')与.prop()结合用于通过为已检查和未检查的元素动态添加/删除类来增强/修改标记。

检查

$('.selector').prop('checked', true).checkboxradio('refresh');

取消选中

$('.selector').prop('checked', false).checkboxradio('refresh');

<强> Demo

参考： Checkboxradio Widget

jQuery Mobile Fast Radio按钮

1 个答案: