Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.09.2017, 00:15
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Получить значение в переменную
Здравствуйте!
Помогите пожалуйста, совсем запутался.
Мне нужно получить значение из группы кнопок. Макет кнопок следующий:
<div class="col-6 krovColor">
	<div class="btn-group" role="group" aria-label="Basic example">
		<button type="button" class="btn btn-primary" name="color" value="Терракотовый">1</button>
		<button type="button" class="btn btn-secondary" name="color" value="Медный">2</button>
		<button type="button" class="btn btn-success" name="color" value="Каштановый">3</button>
		<button type="button" class="btn btn-danger" name="color" value="Коричневый">4</button>
		<button type="button" class="btn btn-warning" name="color" value="Кирпичный">5</button>
	</div>
</div>

Можно ли с такого макета получать значение? Я запутался вот решил спросить.
У меня на jQury вот такое начало, но оно не работает:
$(function() {
    var color = $('.krovColor > button[name="color"]').val();
        console.log(color);
});

Подскажите, что я неправильно делаю. Или правильно эти кнопки на radio переделать, чтобы был переключатель?
Я макет верстаю по бутстрапу, есть такой ещё вариант под макет группы кнопок:
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Мне правильно будет перейти на радио группу кнопок?
Ответить с цитированием
  #2 (permalink)  
Старый 26.09.2017, 00:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

MC-XOBAHCK,
$('.krovColor > button[name="color"]').val(); убрать красное, добавить фильтрацию или цикл если нужно
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2017, 01:16
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Я так понял что мне лучше делать радио-переключатель. Вот переписал под группу. Пока классы цветов для кнопок взял бутстраповские, потом перепишу под нужные мне оттенки.

Просьба - посмотрите пожалуйста мой макет, может какие атрибуты лишние и их стоит удалить.
<div class="col-6 krovColor">
 <div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="radio" name="color" id="option1" autocomplete="off" value="Терракотовый" checked>1</label>
	<label class="btn btn-secondary">
		<input type="radio" name="color" id="option2" autocomplete="off" value="Медный">2</label>
	<label class="btn btn-success">
		<input type="radio" name="color" id="option3" autocomplete="off" value="Каштановый">3</label>
	<label class="btn btn-danger">
		<input type="radio" name="color" id="option3" autocomplete="off" value="Коричневый">4</label>
	<label class="btn btn-warning">
		<input type="radio" name="color" id="option3" autocomplete="off" value="Кирпичный">5</label>
	</div>
</div>

Думаю такой макет с переключателем (радио) правильнее, а визуально он не отличается от предыдущего.
По обработке радио кнопок я на jQuery и здесь видел документацию - должен справиться с решением, но если есть готовое решение как правильно брать значение - ругать не буду.
Меня интересует какие атрибуты лишние чтобы их убрать. На странице сайта будет похожий переключатель только с другим параметром.
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2017, 04:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

MC-XOBAHCK,
autocomplete="off" - убрать в тег формы.

value="Каштановый">3</label> - это нелогично передавать на сервер текст, а пользователю показывать цифры. Цифры (integer тип), это самое удобное для "распознать/проверить/найти" и они зачастую и являются идентификаторами "каштановых, кирпичных, ...", то что показывают пользователю и чем он оперирует.

$('селектор группы').val(); - вернет значение первого из набора, и в случае радио кнопок нужно указывать в качестве селектора выбранную кнопку.

Последний раз редактировалось laimas, 26.09.2017 в 05:56.
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2017, 14:44
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

По value="Каштановый">3</label> я с вами согласен, просто цифры расставил так, чтобы пока не мешало и не путаться.
<div class="col-6 krovColor">
 <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="color" value="Терракотовый" checked>1</label>
    <label class="btn btn-secondary">
        <input type="radio" name="color" value="Медный">2</label>
    <label class="btn btn-success">
        <input type="radio" name="color" value="Каштановый">3</label>
    <label class="btn btn-danger">
        <input type="radio" name="color" value="Коричневый">4</label>
    <label class="btn btn-warning">
        <input type="radio" name="color" value="Кирпичный">5</label>
    </div>
</div>

В скрипте на jQuery я смог получить выбранный value, но я не могу теперь в новую переменную вытянуть результат из обработчика:
$(function() {
    var color = $('.krovColor input[name="color"]');

    color.change(function krColor() {
        var krCol = $(this).val();
       //console.log(krCol);
       return krCol;
    });

    var selectedColor = krColor();    //Это неправильно и не работает.
});

Поправьте пожалуйста, как мне теперь в новую переменную получить значение из обработчика?
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2017, 15:01
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

$(function() {
    $('.krovColor input[name="color"]').change(function() {
      var selectedColor =  $(this).val();
      console.log(selectedColor);
    });
});
Ответить с цитированием
  #7 (permalink)  
Старый 26.09.2017, 15:05
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

а по путю, вот так

var selectedColor = $('.krovColor input[name="color"]:checked').val();

поместите в ту функцию где она нужна
Ответить с цитированием
  #8 (permalink)  
Старый 26.09.2017, 15:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от j0hnik
var selectedColor = $(this).val();
А var selectedColor = this.value; не достаточно?
Ответить с цитированием
  #9 (permalink)  
Старый 26.09.2017, 15:19
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от laimas Посмотреть сообщение
А var selectedColor = this.value; не достаточно?
вполне
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить значение цвета из color picker razorg1991 jQuery 1 06.10.2014 09:06
Как получить значение переменной из игры на HTML5? Dimaz Общие вопросы Javascript 6 10.08.2014 16:27
Получить максимальное возможное значение scrollTop wayzer Элементы интерфейса 5 12.07.2013 16:32
Получить значение FLOAT evgen6667 Общие вопросы Javascript 6 17.04.2012 18:26
Не могу получить значение атрибута DenQ jQuery 9 06.02.2011 14:33