引導帶按鈕組更改jQuery

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

加入帶班「訪問的第一個數據屬性圖標類名和第二的稱號各個環節。例如，對於第一個鏈接：

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

Answer 2

嗯，首先，我想提取被深埋在你的條件下，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 --> 

你會再使用：

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]; 

    ... 
});