代码之家 › 专栏 › 技术社区 › GreyRoofPigeon

移动设备上的奇怪切换()行为

jquery javascript

GreyRoofPigeon · 技术社区 · 11 年前

用户可以向数据库中添加项目。我给他们一个选项,让他们在此刻添加它,或者手动选择一个日期。

因此,我得到了这个HTML结构。(请注意,我将日期和时间选择器修改为仅一行文本)

<form action="..." method="post" class="feed">
    <div class="datetime">
        Select on what date to add:<br />
        <input type="radio" name="dateType" id="dtNow" value="now" checked />
        <label for="dtNow">Now</label><br />

        <input type="radio" name="dateType" id="dtSel" value="pickadate" />
        <label for="dtSel">Or pick a date:</label><br />
        <div>
            Date and time selector
        </div>
    </div>
</form>

接下来的jQuery代码是:

$(function() {
    $('.datetime div').hide();

    $('.datetime [type=radio]').on('change', function() {
        $('.datetime div').toggle( $('.datetime [type=radio]:checked').val() == 'pickadate');

    });
});

它将div隐藏在内部 .datetime 页面加载时。然后,当更改单选按钮时,它会显示或隐藏div。

这在桌面上运行良好,但在移动设备(HTC One M8s,默认浏览器)上则不行。它显示了额外的div,但不会再次隐藏它。

当我添加 $('body').append(' '); 在 toggle() 行它确实工作。

有人能解释这种行为吗?

JSFiddle .

2 回复 | 直到 11 年前

Don Boots 11 年前

你试过改变逻辑顺序吗?也许jQuery语法的链接有点可疑,或者默认的移动浏览器无法在没有附加破解的情况下使用jQuery。

$(function() {
  $('.datetime div').hide();

  $('.datetime [type=radio]').on('change', function(e) {
    t = ($(this).val() == 'pickadate') ? true : false;
    $('.datetime div').toggle(t);
  });
});

这应该与

$(function() {
  $('.datetime div').hide();

  $('.datetime [type=radio]').on('change', function() {
    $('.datetime div').toggle( $('.datetime [type=radio]:checked').val() == 'pickadate');

  });
});

只要没有任何挂机,默认的移动浏览器就会被卡住。

如果浏览器仍然无法正常运行,您也可以将逻辑更改为类似的内容。

$(function() {
  $('.datetime div').hide();

  $('.datetime [type=radio]').on('change', function(e) {
    toggleElement($(this).val());
  });
});

function toggleElement(el) {
  switch(el) {
    case 'pickadate':
        $('.datetime div').toggle(true);
        break;
    default:
        $('.datetime div').toggle(false);
        break;
  }
}

GreyRoofPigeon 11 年前

经过几天的努力,我找到了解决办法。

问题似乎是 $('.datetime [type=radio]:checked').val() 在更改时不会给出值。

将其更改为 $('.datetime').find('[type=radio]:checked').val() 让它发挥作用。

伊莫,两个代码应该给出同样的结果,但我不清楚为什么没有。

对于完整的答案,这是整个功能:

$(function() {
    $('.datetime div').hide();

    $('.datetime [type=radio]').on('change', function() {
        $('.datetime div').toggle( $('.datetime').find('[type=radio]:checked').val() == 'pickadate');

    });
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前