Question

我开始学习JavaScript / jQuery，并且下面的代码可以工作但是必须有一些更短的代码来编写这个简单的函数。

功能： 当我在引导带按钮组中选择访问级别时，显示和更改字体真棒图标。

$(document).ready(function() {

  $("#access").html(' Alla');
  $("#accessIcon").addClass('fa-globe');

  $('#access_input').val(0);

});
/*
' access
' 0 = all
' 1 = friends
' 2 = private
*/


$(".access").click(function(e) {


  var accessId = $(this).attr('id');

  if (accessId == 0) {
    //alert("Alla = "+ accessId);
    $("#access").html(' Alla');

    $("#accessIcon").removeClass('fa-group');
    $("#accessIcon").removeClass('fa-eye');

    $("#accessIcon").addClass('fa-globe');

    $('#access_input').val(accessId);

  } else if (accessId == 1) {
    //alert("Vänner = "+ accessId);
    $("#access").html(' Vänner');
    $("#accessIcon").removeClass('fa-globe');
    $("#accessIcon").removeClass('fa-eye');

    $("#accessIcon").addClass('fa-group');

    $('#access_input').val(accessId);

  } else if (accessId == 2) {
    //alert("Privat = "+ accessId);
    $("#access").html('Privat');
    $("#accessIcon").removeClass('fa-globe');
    $("#accessIcon").removeClass('fa-group');

    $("#accessIcon").addClass('fa-eye');

    $('#access_input').val(accessId);
  } else {
    alert("inget alternativ valt! = " + accessId);
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />


<!-- Start inputs -->

<input type="text" id="access_input" value="">
<br>

<div class="btn-group">
  <button type="button" class="btn btn-default"><i id="accessIcon" class="fa ">&nbsp;</i>  <span id="access">Action</span>
  </button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="javascript:void(0);" class="access" id="0"><i class="fa fa-globe"></i> Alla</a>
    </li>
    <li><a href="javascript:void(0);" class="access" id="1"><i class="fa fa-group"></i> Vänner</a>
    </li>
    <li><a href="javascript:void(0);" class="access" id="2"><i class="fa fa-eye"></i> Privat</a>
    </li>
  </ul>
</div>

Answer 1

嗯，对于初学者，我会提取深埋在您条件中的UI细节，以便您可以使用变量：

$(".access").click(function(e) {
  var accessId = $(this).attr('id');
  var access = accessTypes[accessId];

  $("#access").html(' ' + access.title);
  $("#accessIcon").attr('class', 'fa ' + access.icon);
  $('#access_input').val(accessId);
});

然后你可以这样做：

id

请注意，这只是因为按钮的accessTypes与id中的数组索引相匹配。一旦你为其他东西添加了第二组按钮，这个解决方案就会崩溃。

我建议您为此目的而不依赖于<a href="javascript:void(0);" class="access" data-id="all"> 到数据属性，我也会使用字符串标识符，尽管只执行其中任何一个就足以解决问题。 / p>

var accessTypes = {
  all: { title: 'Alla', icon: 'fa-globe' },
  friends: { title: 'Vänner', icon: 'fa-group' },
  'private': { title: 'Privat', icon: 'fa-eye' }
};

然后您将使用：

$(".access").click(function(e) {
  var accessId = $(this).data('id');
  var access = accessTypes[accessId];

  ...
});

和...

{{1}}

Answer 2

添加到每个链接的课程＆＃39;访问＆＃39;数据属性首先用于图标类名，第二个用于标题。第一个链接示例：

<a href="javascript:void(0);" class="access" id="0" data-icon="globe" data-title="Alla">

您的onclick可以简化为：

$(".access").click(function(e) {
  $("#access").html($(this).data('title'));
  $("#accessIcon").removeClass();
  $("#accessIcon").addClass('fa fa-' + $(this).data('icon'));
  $('#access_input').val($(this).attr('id'));
});

引导带按钮组改变jQuery

2 个答案: