iPhone touch 在 HTML5 应用程序中的行为类似于悬停

Question

我正在使用 Bootstrap 构建一个 HTML5 应用程序。我有一些自定义标记来为一些单选按钮设置皮肤，还有一些 JQuery 来驱动它：

<div role="group" class="btn-group btn-group-justified">
    <label for="radioOption1" class="btn btn-primary">
        <input type="radio" id="radioOption1" name="Options" />
        <span>ABC</span>
    </label>
    <label for="radioOption2" class="btn btn-default">
        <input type="radio" id="radioOption2" name="Options" />
        <span>XYZ</span>
    </label>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var radios = $("input[name=\"Options\"");
        radios.click(function () {
            radios.each(function () {
                $("label[for=\"" + $(this).attr("id") + "\"]").toggleClass("btn-primary", $(this).is(":checked"));
                $("label[for=\"" + $(this).attr("id") + "\"]").toggleClass("btn-default", !$(this).is(":checked"));
            });
        });
    });
</script>

它可以在桌面上运行，但在我的 iPhone 上，每当我点击其中一个标签时，它都会更改为显示桌面的悬停样式，而不是点击样式。

因此，在这个特定实例中，“触摸”似乎等同于“悬停”。

有没有人有这方面的经验或知道如何解决它？

Answer 1

应该是这样的：

$(document).ready(function () {
    var radios = $('input[name="Options"]');
    radios.change(function () {
        $('label[for="' + this.id + '"]').toggleClass("btn-primary", $(this).is(":checked"))
           .siblings('label').toggleClass("btn-primary btn-default");
        });
    });
});