我正在创建一个调查表单,当用户关注它们时,需要突出显示每个问题和答案(通过更改背景颜色)。 .focus()和.blur()都可以在Firefox和IE中使用,但是并不完全适用于Safari和Chrome浏览器中的。我也尝试了.focusin()和.focusout(),结果相同。编辑:单击不会触发焦点事件,但在输入字段之间切换则可以。我说并不完全是,因为它适用于文本输入,选择输入和文本区域输入。但不是单选和复选框输入。

$(document).ready(function()
 {
    $("form li").focusin(function()
  {
   $(this).addClass("over");
  }).focusout(function()
  {
     $(this).removeClass("over");
  });
 });

这被应用于类似于以下内容的html块:
<li>
    <label for="webmail" class="desc">Email</label>
    <input type="text" name="webmail" id="webmail" />
</li>
<li>
    <label for="business" class="desc">Purpose of your Charter Flight:</label>
    <div>
        <span>
            <input type="radio" name="purpose" id="business" class="radio" />
            <label class="choice" for="business">Business</label>
        </span>
        <span>
            <input type="radio" name="purpose" id="pleasure" class="radio" />
            <label class="choice" for="pleasure">Pleasure</label>
        </span>
    </div>
</li>

我曾尝试过使用切换开关,但我正在寻找一种更优雅的解决方案,该解决方案不涉及使用复杂的逻辑来使其工作。有任何想法吗?

最佳答案

很久以前,我也遇到了这个问题,奇怪的是,这是一个单选按钮,使我感到悲伤。

尝试改用 jQuery.change() ,这是我遇到的那个问题的一个有效示例

$("input#zendesk-dropbox-askedbefore, input#zendesk-dropbox-newhere").change(function() {
    $("label#zendesk-dropbox-label-askedbefore, label#zendesk-dropbox-label-newhere").toggleClass('zendesk-dropbox-label-highlight');
});

如果我疯狂使用ID名称还不清楚,input#zendesk-dropbox-askedbeforeinput#zendesk-dropbox-newhere都是单选按钮。

09-25 19:09