Javascript 引导按钮组更改jQuery

我开始学习JavaScript/jQuery，下面的代码可以使用，但是必须为这个简单的函数编写一些较短的代码

功能： 在“引导按钮”组中选择“访问级别”时显示和更改的字体图标

$（文档）.ready（函数（）{
$（“#access”）.html（'Alla'）；
$（“#accessIcon”）.addClass（'fa-globe'）；
$（'access_input'）.val（0）；
});
/*
“进入
“0=全部
'1=朋友
'2=私人
*/
$（“.access”）。单击（函数（e）{
var accessId=$（this.attr（'id'）；
if（accessId==0）{
//警报（“Alla=“+accessId”）；
$（“#access”）.html（'Alla'）；
$（“#accessIcon”）.removeClass（'fa-group'）；
$（“#访问图标”）.removeClass（'fa-eye'）；
$（“#accessIcon”）.addClass（'fa-globe'）；
$（'#access_input'）.val（accessId）；
}else if（accessId==1）{
//警报（“Vänner=“+accessId”）；
$（“#access”）.html（'Vänner'）；
$（“#accessIcon”）.removeClass（'fa-globe'）；
$（“#访问图标”）.removeClass（'fa-eye'）；
$（“#accessIcon”）.addClass（'fa-group'）；
$（'#access_input'）.val（accessId）；
}else if（accessId==2）{
//警报（“Privat=“+accessId”）；
$（“#access”）.html（'Privat'）；
$（“#accessIcon”）.removeClass（'fa-globe'）；
$（“#accessIcon”）.removeClass（'fa-group'）；
$（“#accessIcon”）.addClass（'fa-eye'）；
$（'#access_input'）.val（accessId）；
}否则{
警报（“inget alternativ valt！=”+accessId）；
}
});



行动
切换下拉列表








首先，我将提取隐藏在您的条件中的UI细节，以便您可以使用变量：

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

然后你可以简单地做：

$(".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"> <!-- etc -->

而且

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

  ...
});

首先，我将提取隐藏在您的条件中的UI细节，以便您可以使用变量：

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

然后你可以简单地做：

$(".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"> <!-- etc -->

而且

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

  ...
});

添加到每个具有类“访问”数据属性的链接，首先是图标类名称，其次是标题。第一个链接的示例：

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

添加到每个具有类“访问”数据属性的链接，首先是图标类名称，其次是标题。第一个链接的示例：

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

我建议你从angularjs和angularjs引导模块开始，我建议你从angularjs和angularjs引导模块+1开始，我实际上更喜欢这个而不是我自己的答案。图标和标题都只是用户界面的问题，因此将它们与标记紧密结合是很好的。@DavidHedlund我完全同意你的观点+1我实际上更喜欢这个而不是我自己的答案。图标和标题都只是用户界面的问题，所以让它们与标记紧密结合是很好的。@DavidHedlund我完全同意你的看法