我有一個Twitter Bootstrap按鈕收音機並掛鉤onclick事件。但是,如何檢查觸發了哪些按鈕?Twitter上的Bootstrap onclick事件按鈕收音機
我的第一個想法是簡單地檢查'active'類,但是這應該創建一個競爭條件(結果取決於Twitter Bootstrap事件還是我自己的onclick事件首先被處理)。
我有一個Twitter Bootstrap按鈕收音機並掛鉤onclick事件。但是,如何檢查觸發了哪些按鈕?Twitter上的Bootstrap onclick事件按鈕收音機
我的第一個想法是簡單地檢查'active'類,但是這應該創建一個競爭條件(結果取決於Twitter Bootstrap事件還是我自己的onclick事件首先被處理)。
這是一個非常惱人的問題。我最終使用的是:
首先,創建一組沒有data-toggle
屬性的簡單按鈕。
<div id="selector" class="btn-group">
<button type="button" class="btn active">Day</button>
<button type="button" class="btn">Week</button>
<button type="button" class="btn">Month</button>
<button type="button" class="btn">Year</button>
</div>
接着,編寫事件處理程序,模擬由「活化」點擊的一個和「去激活」所有其他按鈕的單選按鈕的效果。 (編輯:從意見綜合Nick的清潔版)
$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
// TODO: insert whatever you want to do with $(this) here
});
我會用一個改變事件不是一個點擊這樣的:
$('input[name="name-of-radio-group"]').change(function() {
alert($(this).val())
})
想過這個問題,但根據W3Schools的(http://www.w3schools.com/jsref/event_onchange.asp)onchange事件僅由,
這隻適用於Chrome瀏覽器:由於Bootrap(至少3.0版)的作用方式,Firefox和其他瀏覽器不會觸發更改事件。 – 2013-09-30 20:11:01
最新文檔(3.0)自舉似乎使用輸入類型=「複選框」的分組按鈕推薦:http://getbootstrap.com/javascript/#buttons-examples – 2014-01-10 05:36:01
不要使用數據切換屬性,這樣你可以自己控制的切換行爲。因此,這將避免 '競爭條件'
我的代碼:
按鈕組模板(寫在.erb,嵌入式紅寶石的Ruby on Rails的):
<div class="btn-group" id="featuresFilter">
<% _.each(features, function(feature) { %> <button class="btn btn-primary" data="<%= feature %>"><%= feature %></button> <% }); %>
</div>
和javascript:
onChangeFeatures = function(e){
var el=e.target;
$(el).button('toggle');
var features=el.parentElement;
var activeFeatures=$(features).find(".active");
console.log(activeFeatures);
}
onChangeFeatures函數將在按鈕被點擊後觸發。
幫我...我遇到了一個問題,在引導庫改變了我的按鈕的切換狀態之前,我的點擊處理程序會關閉 - 所以我的代碼總是認爲按鈕被切換。在更復雜的情況下,自己處理切換自然會更好。 – 2012-07-28 20:05:40
從技術上講,在這種情況下沒有[競爭條件](http://en.wikipedia.org/wiki/Race_condition)。 – 2014-06-18 11:27:52
綜觀例如HTML的Twitter的引導頁(http://twitter.github.com/bootstrap/base-css.html#forms)上的單選按鈕,則可以看到,每一個輸入具有一個唯一的ID屬性,即optionsRadios1
和optionsRadios2
。
相關的HTML示例代碼段包括在這裏的完整性:
<div class="controls"> <label class="radio"> <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios"> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios"> Option two can is something else and selecting it will deselect option one </label> </div>
所以,你可以使用jQuery的單擊事件,然後使用this
參考一下被點擊的HTML元素的ID。
$('.controls').find('input').bind('click',function(event){ if($(this).attr('id')==='optionsRadios1'){ alert($(this).attr('id')); } else { //... call some other function } });
我需要做同樣的事情的圖表,你可以選擇要顯示的數據的週期。
所以我介紹了CSS類的BTN-組無線電',並使用了以下非侵入式JavaScript的一行:
// application.js
$(document).ready(function() {
$('.btn-group-radio .btn').click(function() {
$(this).addClass('active').siblings('.btn').removeClass('active');
});
});
這裏是HTML:
<!-- some arbitrary view -->
<div class="btn-group btn-group-radio">
<%= link_to '1W', charts_path('1W'), class: 'btn btn-default active', remote: true %>
<%= link_to '1M', charts_path('1M'), class: 'btn btn-default', remote: true %>
<%= link_to '3M', charts_path('3M'), class: 'btn btn-default', remote: true %>
<%= link_to '6M', charts_path('6M'), class: 'btn btn-default', remote: true %>
<%= link_to '1Y', charts_path('1Y'), class: 'btn btn-default', remote: true %>
<%= link_to 'All', charts_path('all'), class: 'btn btn-default', remote: true %>
</div>
自舉3默認收音機/按鈕組結構是:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
你可以選擇激活一個這樣的:
$('.btn-primary').on('click', function(){
alert($(this).find('input').attr('id'));
});
爲什麼在輸入具有「值」屬性時使用「id」字段作爲值? – Dementic 2015-03-03 13:40:09
我看到了很多複雜的答案,而這是自舉3超級簡單:
步驟1:使用the official example code以創建單選按鈕組,給容器中的ID:
<div id="myButtons" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
第2步:使用此jQuery的處理程序:
$("#myButtons :input").change(function() {
console.log(this); // points to the clicked input button
});
這是我同意的最佳解決方案。 – Codemole 2015-09-10 07:00:37
這不起作用 – shorif2000 2015-12-19 15:05:44
@bonez我已經添加了一個小提琴,請詳細說明它爲什麼不適合你。 – marcovtwout 2015-12-23 09:41:26
如果您的HTML類似的例子,所以產生在標籤中單擊事件,而不是在輸入,所以我使用了下面的代碼: HTML示例:
<div id="myButtons" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
</div>
爲事件的Javascript代碼:
$('#option1').parent().on("click", function() {
alert("click fired");
});
感謝您發佈這個問題的答案! Stack Overflow不鼓勵使用代碼解答,因爲沒有上下文的代碼轉儲並不能解釋解決方案如何或爲什麼會起作用,這使原始海報(或任何未來的讀者)很難理解其背後的邏輯。請編輯你的問題,幷包括你的代碼的解釋,以便其他人可以從你的答案中受益。 – 2015-08-05 20:00:05
我搜索了這麼多頁:我發現了一個漂亮的解決方案。檢查出來:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
$(function() {
$("#my_launch_today_chk").change(function() {
var chk = $(this).prop('checked');
if(chk == true){
console.log("On");
}else{
console.log("OFF");
}
});
});
</script>
</head>
<body >
<input type="checkbox" id="my_launch_today_chk" checked data-on="Launch" data-off="OFF" data-toggle="toggle" data-size="small">
</body>
</html>
稍微簡明和優化(無雙呼叫到選擇器)版本:$(這).addClass(「激活」)的兄弟姐妹()removeClass(「激活」); – Nick 2014-02-16 02:14:44
這不適用於單選按鈕。如何指定哪個是哪個,如果每個單選按鈕做不同的事情 – 2014-08-09 02:54:01
@MurhafSousli我不知道我理解你的問題。如果你在代碼中插入'// TODO',你應該可以像'$(this)'一樣訪問新選擇的單選按鈕。 – 2014-08-09 09:18:21