Question

人们可以向数据库添加项目。我现在给他们选择添加它，或者手动选择日期。

因此我得到了这个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');

    });
});

它在页面加载时隐藏了.datetime内的div。然后当单选按钮被更改时，它会显示或隐藏div。

这在桌面上工作正常，但在移动设备（HTC One M8s，默认浏览器）上它没有。它显示了额外的div，但不会再隐藏它。

当我在$('body').append(' ');行之前添加toggle()时，它确实有效。

有没有人对此行为有解释？

JSFiddle

Answer 1

您是否尝试过更改逻辑顺序？也许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;
  }
}

Answer 2

经过几天的挣扎，我找到了解决方案。

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

将其更改为$('.datetime').find('[type=radio]:checked').val()使其正常工作。

Imo，两个代码应该给出相同的结果，但是我不清楚它为什么没有。

要获得完整的答案，这就是整个功能：

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

移动设备上的奇怪切换（）行为

2 个答案: