如何将焦点放在映射到单选按钮的字体真棒图标上

Question

我在 ASP.NET MVC 应用程序中使用 Twitter Bootstrap。在一个页面中，当用户单击相关图标时，我想显示一个网格或列表视图。为此，我使用单选按钮，它确实根据用户选择显示。

但问题是它总是关注网格图标，即使它触发列表模式。

这是我的代码：

<div class="row" >
  <div class="col-xs-4 col-sm-4">
    <form class="pull-left">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary  active" title="Show as a Grid" >
          <i class="fa fa-table"></i>
          @Html.RadioButtonFor(model => Model.Context.ViewMode, "grid",
                  new { name = "viewmode", @class = "",
                        onchange = "setLocation('?viewmode=grid');" })
          Grid
        </label>

        <label class="btn btn-primary" title="Show as a List" >
          <i class="fa fa-list"></i>
          @Html.RadioButtonFor(model => Model.PagingFilteringContext.ViewMode, "list", 
                  new { name = "viewmode", @class = "", 
                        onchange = "setLocation('?viewmode=list');" }) 
          List
        </label>
      </div>
    </form>
  </div>
</div>
<div class="show-content">

  @if (Model.Context.ViewMode == "grid")
  {
    <label>Grid content here...</label>
  }
  else
  {
    <label>List content here...</label>
  }

</div>

// set visibility between icons

$(document).ready(function () {
  $("#Context_ViewMode").on('click', function () {
    ToggleRadioButtons("#Context_ViewMode", $(this));
  });
});

function ToggleRadioButtons(groupName, current) {
  var chk = $(groupName + " .fa-table");
  $(chk).removeClass('fa-table').addClass('fa-list');
  $(current).find(">:first-child").removeClass('fa-list');
  $(current).find(">:first-child").addClass('fa-table');
}

但是单击时它没有将焦点设置在列表图标上。有什么想法吗？

编辑：

我设法让事件触发工作，但如果选择了“列表”，它不会保持选中状态，在从服务器加载正确的“列表”结果后更改回“网格”突出显示（活动）。

变更摘要：

1. 为两个标签添加了新类“fawsm-radiobutton”

2. 为标签列表添加了新类“非活动”

3. 更改了 JavaScript 以添加删除 'active' 和 'notactive'

这是我的代码更改：

<label class="fawsm-radiobutton btn btn-primary  active" title="Show as a Grid" >
  <i class="fa fa-table"></i>
  @Html.RadioButtonFor(model => Model.Context.ViewMode, "grid",
              new { name = "viewmode", @class = "",
                    onchange = "setLocation('?viewmode=grid');" })
      Grid
 </label>

 <label class="fawsm-radiobutton btn btn-primary notactive" title="Show as a List" >
   <i class="fa fa-list"></i>
   @Html.RadioButtonFor(model => Model.PagingFilteringContext.ViewMode, "list", 
              new { name = "viewmode", @class = "", 
                    onchange = "setLocation('?viewmode=list');" }) 
      List
 </label>

$(document).ready(function () {
 $("#Context_ViewMode>.fawsm-radiobutton").on('change', function () {
  ToggleRadioButtons("#Context_ViewMode", $(this));
 });
});

function ToggleRadioButtons(groupName, current) {
 var chk = $(groupName + " .fawsm-radiobutton.active");
 $(chk).removeClass('active’).addClass('notactive');
 $(current).find(">:first-child").removeClass('notactive');
 $(current).find(">:first-child").addClass('active');
}

当我在浏览器上使用开发人员工具 (F12) 时，它会显示删除和添加“活动”和“非活动”类到标签。但在从服务器加载列表项后，它会恢复为活动模式下的原始“网格”图标。 所以我猜是浏览器渲染的时候

@if (Model.Context.ViewMode == "grid")
{}
else{}

部分我需要通知客户对标签类进行上述更改。我不知道怎么做。我需要使用 AJAX 之类的东西吗？

Answer 1

您应该使用.focus() 方法。