Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2018, 13:29
Интересующийся
Отправить личное сообщение для mopsusha Посмотреть профиль Найти все сообщения от mopsusha
 
Регистрация: 21.01.2011
Сообщений: 15

Как сделать чтобы в текст button менялось значение в зависимости от количества выбран
Как сделать чтобы в текст button менялось значение в зависимости от количества выбранных select например выбираем 2 селекта в button текст меняется на Район (2), выбираем 3 селекта в button текст меняется на Район (3), то есть шел подсчет количества выбранных селектов и передача в поле button.

Вот полный код, то есть по сути надо чтобы подсчитывалось количество li с классом active selected в div который следующий после lable с кнопкой button и передавалось это количество в button например район (3)

<li style=" clear:both;" class="magic-select">
<div class="subclass">

<label class="group-label">
<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район
</button>
</label>
<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
<ul>
<li rel="2" class="active">Автозаводский</li>
<li rel="3" class="active selected">Канавинский</li>
<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
<li rel="6" class=" active">Нижегородский</li>
<li rel="7" class=" active">Приокский</li>
<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
</ul>
<span class="btn-close" onclick="jaMagicSelectClose(this, 'mg-161-xf_1'); return false;">Close</span><span class="arrow">&nbsp;</span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
<span rel="3" class="remove" title="Remove"></span></span></div>
    <script type="text/javascript">
    jQuery(document).ready( function(){
        jaMagicInit('mg-161-xf_1', 'xf_1');
    });
    </script>       
</div>

</li>
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2018, 13:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,776

А что делает функция jaMagicInit(), не подсчитывает ли выбранных и подставляет их в текст?
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2018, 13:58
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<li style=" clear:both;" class="magic-select">
		<div class="subclass">

			<label class="group-label">
				<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район
				</button>
			</label>
			<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
				<ul>
					<li rel="2" class="active">Автозаводский</li>
					<li rel="3" class="active selected">Канавинский</li>
					<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
					<li rel="6" class=" active">Нижегородский</li>
					<li rel="7" class=" active">Приокский</li>
					<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
				</ul>
				<span class="btn-close">Close</span><span class="arrow">&nbsp;</span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
					<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
						<span rel="3" class="remove" title="Remove"></span></span></div>
						
					</div>

				</li>

				<script>
					document.querySelector(".ja-magic-select").addEventListener('click', leng);
					function leng(){document.querySelector("#g-161-xf_1").textContent =	'Район ('+document.querySelectorAll(".ja-magic-select li.active").length+')';
				}
				leng();
			</script>  
		</body>
		</html>
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2018, 15:00
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

М.б. как-то так?
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
          <style>
          .selected { color: red;};
         </style>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<li style=" clear:both;" class="magic-select">
		<div class="subclass">

			<label class="group-label">
				<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район (0)
				</button>
			</label>
			<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
				<ul>
					<li rel="2" class="active">Автозаводский</li>
					<li rel="3" class="active selected">Канавинский</li>
					<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
					<li rel="6" class=" active">Нижегородский</li>
					<li rel="7" class=" active">Приокский</li>
					<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
				</ul>
				<span class="btn-close">Close</span><span class="arrow">&nbsp;</span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
					<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
						<span rel="3" class="remove" title="Remove"></span></span></div>
						
					</div>

				</li>

				<script>
					document.querySelector(".ja-magic-select").addEventListener('click', leng);
					function leng(event){
                          event.target.classList.toggle("selected");
                          var but = document.querySelector("#g-161-xf_1");
                           but.textContent = but.textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length);
				}
                                var stEl = document.querySelector(".ja-magic-select .selected");
				stEl.click(); stEl.click();
			</script>  
		</body>
		</html>

Последний раз редактировалось Dilettante_Pro, 19.03.2018 в 15:59.
Ответить с цитированием
  #5 (permalink)  
Старый 19.03.2018, 15:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,776

Dilettante_Pro,
если функция объявленная в коде подсчитывают такое и помещают в кнопку при загрузке страницы, то .textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length;

И может как-то увязать тогда с существующей функцией.
Ответить с цитированием
  #6 (permalink)  
Старый 19.03.2018, 15:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

laimas,
Сообщение от laimas
если функция объявленная в коде подсчитывают такое и помещают в кнопку при загрузке страницы, то .textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length;
Изменил

Сообщение от laimas
И может как-то увязать тогда с существующей функцией.
Какой? jaMagicSelect ? Она работает по клику на кнопку, и, по идее, делает что-то другое ( и неизвестно что)

Последний раз редактировалось Dilettante_Pro, 19.03.2018 в 16:18.
Ответить с цитированием
  #7 (permalink)  
Старый 19.03.2018, 15:33
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,776

У него кругом передается g-161-xf_1, может где-то и есть нужное.

Сообщение от Dilettante_Pro
Какой? jaMagicSelect ?
jaMagicInit('mg-161-xf_1', 'xf_1');

Последний раз редактировалось laimas, 19.03.2018 в 15:39.
Ответить с цитированием
  #8 (permalink)  
Старый 19.03.2018, 18:31
Интересующийся
Отправить личное сообщение для mopsusha Посмотреть профиль Найти все сообщения от mopsusha
 
Регистрация: 21.01.2011
Сообщений: 15

Не понимаю почему, но на сайте почему-то не работает.
Ответить с цитированием
  #9 (permalink)  
Старый 19.03.2018, 18:33
Интересующийся
Отправить личное сообщение для mopsusha Посмотреть профиль Найти все сообщения от mopsusha
 
Регистрация: 21.01.2011
Сообщений: 15

Сообщение от Dilettante_Pro Посмотреть сообщение
М.б. как-то так?
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
          <style>
          .selected { color: red;};
         </style>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<li style=" clear:both;" class="magic-select">
		<div class="subclass">

			<label class="group-label">
				<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район (0)
				</button>
			</label>
			<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
				<ul>
					<li rel="2" class="active">Автозаводский</li>
					<li rel="3" class="active selected">Канавинский</li>
					<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
					<li rel="6" class=" active">Нижегородский</li>
					<li rel="7" class=" active">Приокский</li>
					<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
				</ul>
				<span class="btn-close">Close</span><span class="arrow">&nbsp;</span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
					<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
						<span rel="3" class="remove" title="Remove"></span></span></div>
						
					</div>

				</li>

				<script>
					document.querySelector(".ja-magic-select").addEventListener('click', leng);
					function leng(event){
                          event.target.classList.toggle("selected");
                          var but = document.querySelector("#g-161-xf_1");
                           but.textContent = but.textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length);
				}
                                var stEl = document.querySelector(".ja-magic-select .selected");
				stEl.click(); stEl.click();
			</script>  
		</body>
		</html>
Что может быть не так? не работает и ошибки не выдает.
Ответить с цитированием
  #10 (permalink)  
Старый 19.03.2018, 18:57
Интересующийся
Отправить личное сообщение для mopsusha Посмотреть профиль Найти все сообщения от mopsusha
 
Регистрация: 21.01.2011
Сообщений: 15

Сообщение от j0hnik Посмотреть сообщение
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<li style=" clear:both;" class="magic-select">
		<div class="subclass">

			<label class="group-label">
				<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район
				</button>
			</label>
			<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
				<ul>
					<li rel="2" class="active">Автозаводский</li>
					<li rel="3" class="active selected">Канавинский</li>
					<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
					<li rel="6" class=" active">Нижегородский</li>
					<li rel="7" class=" active">Приокский</li>
					<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
				</ul>
				<span class="btn-close">Close</span><span class="arrow">&nbsp;</span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
					<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
						<span rel="3" class="remove" title="Remove"></span></span></div>
						
					</div>

				</li>

				<script>
					document.querySelector(".ja-magic-select").addEventListener('click', leng);
					function leng(){document.querySelector("#g-161-xf_1").textContent =	'Район ('+document.querySelectorAll(".ja-magic-select li.active").length+')';
				}
				leng();
			</script>  
		</body>
		</html>
Работает, однако если меняю класс active на selected показывает в 2 раза больше, то есть если выбираю 1 элемент показывает что выбр
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 02:30
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 15:34
как сделать чтобы в popup окне показывалось картинка? sarik Общие вопросы Javascript 31 15.03.2013 11:12
Как сделать чтобы text() брал только текст родителя без текста вложенных контейнеров? Andrey32 jQuery 3 23.05.2009 00:33
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 22:24