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');
}

但点击后它没有将重点放在List图标上。有什么想法吗？

修改

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

变更摘要：

为两个标签添加了新类'fawsm-radiobutton'
为标签列表添加了新的“非活动”类
更改了JavaScript以添加删除＆＃39;有效＆＃39;和＆＃39; notactive＆＃39;

以下是我的代码更改：

<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）时，它会显示删除并添加“活动”和“非活动”类到标签。但是从服务器加载List项目后，它将恢复为活动模式下的原始“网格”图标。所以我想当浏览器呈现

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

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

Answer 1

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

如何将焦点设置为映射到单选按钮的字体真棒图标

1 个答案: