У меня есть кнопки Twitter-бутстрапа Twitter и подключаю к нему событие 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>
Затем напишите обработчик событий, который имитирует эффект переключателя, "активируя" щелкнутый и "дезактивируя" все остальные кнопки. (EDIT: Интегрированный Nick более чистый вариант из комментариев.)
$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
// TODO: insert whatever you want to do with $(this) here
});
Я вижу много сложных ответов, в то время как это просто супер в Bootstrap 3:
Шаг 1: используйте официальный пример кода, чтобы создать группу переключателей и предоставить контейнеру идентификатор:
<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
});
Я бы использовал событие изменения не так:
$('input[name="name-of-radio-group"]').change( function() {
alert($(this).val())
})
Для Bootstrap 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'));
});
Не используйте атрибут data-toggle, чтобы вы могли управлять поведением переключателя самостоятельно. Поэтому он избежит "состояния гонки"
мои коды:
шаблон группы кнопок (написан на .erb, встроенный рубин для рубинов на рельсах):
<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 будет активирована после нажатия кнопки.
Мне нужно было сделать то же самое для диаграммы, где вы могли бы выбрать период данных, которые должны отображаться.
Поэтому я ввел класс CSS "btn-group-radio" и использовал следующий ненавязчивый однострочный 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>
Глядя на пример HTML для переключателей на странице Twitter Bootstrap (http://twitter.github.com/bootstrap/base-css.html#forms), вы можете видеть, что каждый вход имеет уникальный Идентификатор, т.е. 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 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 click, а затем использовать ссылку this, чтобы посмотреть на идентификатор элемента HTML, который был нажат.
$('.controls').find('input').bind('click',function(event){
if($(this).attr('id')==='optionsRadios1'){
alert($(this).attr('id'));
} else {
//... call some other function
}
});
Я искал столько страниц: я нашел красивое решение. Проверьте это:
<!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>
Если ваш html похож на пример, так что событие click создается над меткой, а не на входе, поэтому я использую следующий код: Пример 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");
});