Оптимизация: изменить цвет кнопки и её значение в зависимости от выбранного элемента выпадающего меню

@bulvar · Регистрация: 13.01.2015

Студворк — интернет-сервис помощи студентам

Добрый день! Изучаю jquery c азов, не могли бы подсказать как можно сократить и вообще оптимизировать код?
Сам код следующий, он рабочий, но думаю очень много лишнего, громоздкий, результат его работы:

http://jsfiddle.net/bulvar/uepw1Lcu/3/

Ниже его копия:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="btn-group ">
        <button class="btn btn-default btn-sm dropdown-toggle " type="button" data-toggle="dropdown" >
            Small button <span class="caret"></span>
        
    
        </button>
      <ul class="dropdown-menu" role="menu" aria-expanded="false">
        <li ><a class="btn btn-danger">Red</a></li>
        <li ><a class="btn btn-warning">Yellow</a></li>
        <li ><a class="btn btn-success">Green</a></li>
       
      </ul>
    </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
jQuery(document).ready(function($){
                var buttonClass = jQuery('button.btn').attr('class');
                jQuery('li a').on('click', function(){
                    var liClass = jQuery(this).attr('class');
                jQuery('div.btn-group button').removeAttr('class');
                jQuery('div.btn-group button').addClass(buttonClass+' '+liClass);
                });
                jQuery('.btn.btn-danger').on('click', function(){
                    $.ajax({
                        data: jQuery('li a.btn.btn-danger').text(),
                        cash: false, 
                        success: function(data){
                                jQuery('div.btn-group button').html(jQuery('li a.btn.btn-danger').text());
                        }
                    });
                });
            
                jQuery('.btn.btn-warning').on('click', function(){
                    $.ajax({
                        
                        data: jQuery('li a.btn.btn-warning').text(),
                        cash: false,
                        success: function(data){
                                jQuery('div.btn-group button').html(jQuery('li a.btn.btn-warning').text());
                        }
                    });
                });
                jQuery('.btn.btn-success').on('click', function(){
                    $.ajax({
                        
                        data: jQuery('li a.btn.btn-danger').text(),
                        cash: false,
                        success: function(data){
                                jQuery('div.btn-group button').html(jQuery('li a.btn.btn-success').text());
                        }
                    });
                }); 
            });

@Давран · 19.02.2015, 14:42

bulvar, в чем логика скрипта, что бы он просто менял цвет кнопки и название внутри нее?

Добавлено через 29 секунд
bulvar, Для начала, слово jQuery можно заменить знаком $.

Добавлено через 1 минуту
bulvar, зачем столько аякса и куда Вы отправляете данные через аякс? не вижу параметры url

@bulvar · 19.02.2015, 23:32 **[ТС]**

Логика скрипта в том, чтобы изменить цвет кнопки и её значение в зависимости от выбранного эл-та, на самом деле код заточен под "Wordpress" потому это просто демонстрационный экземпляр.

Добавлено через 10 минут
Тут довольно странный момент конструкция jQuery(document) отрабатывает, $(document) - нет

Вот код заточенный под wordpress

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
jQuery(document).ready(function($){
                
                var buttonClass = jQuery('button.btn').attr('class');
                $('li a').on('click', function(){
                    var liClass = jQuery(this).attr('class');
                jQuery('div.btn-group button').removeAttr('class');
                jQuery('div.btn-group button').addClass(buttonClass+' '+liClass);
                });
                
                jQuery('.btn.btn-danger.btn-default').on('click', function(){
                var option = jQuery('li a.btn.btn-danger.btn-default').html();  
                var ajaxurl = '<?php echo admin_url('admin-ajax.php');?>';  
                    var data = {action :'btn_ajax', 
                                status : option}
                    
                    $.post(ajaxurl, data, function(data) {
                        jQuery('div.btn-group button').text(data).append("<span class='caret'></span>");
                    });
                }); 
                
                jQuery('.btn.btn-warning').on('click', function(){
                var option = jQuery('li a.btn.btn-warning').text(); 
                var ajaxurl = '<?php echo admin_url('admin-ajax.php');?>';  
                    var data = {action :'btn_ajax', 
                                status : option}
                    
                    $.post(ajaxurl, data, function(data) {
                        jQuery('div.btn-group button').html(data).append("<span class='caret'></span>");
                        
                    });
                });
                
                jQuery('.btn.btn-success').on('click', function(){
                var option = jQuery('li a.btn.btn-success').text(); 
                var ajaxurl = '<?php echo admin_url('admin-ajax.php');?>';  
                    var data = {action :'btn_ajax', 
                                status : option}
                    
                    $.post(ajaxurl, data, function(data) {
                        jQuery('div.btn-group button').html(data).append("<span class='caret'></span>");
                    });
                });
                
            });

Добавлено через 7 минут
Ещё по какой то совершенно мне не понятной причине цвет кнопки меняется моментально, а вот значение с опозданием, думаю как раз из-за неряшливости кода моего.

@nrobert · 21.02.2015, 14:17

http://jsfiddle.net/n_robert/rn2at6w5/

@bulvar · 28.02.2015, 06:35 **[ТС]**

Благодарю!

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	19.02.2015, 14:42
	bulvar, в чем логика скрипта, что бы он просто менял цвет кнопки и название внутри нее? Добавлено через 29 секунд bulvar, Для начала, слово jQuery можно заменить знаком $. Добавлено через 1 минуту bulvar, зачем столько аякса и куда Вы отправляете данные через аякс? не вижу параметры url 0

@nrobert 171 / 153 / 67 Регистрация: 11.02.2015 Сообщений: 450
	21.02.2015, 14:17
	Сообщение было отмечено bulvar как решение Решение http://jsfiddle.net/n_robert/rn2at6w5/ 1

@bulvar 0 / 0 / 0 Регистрация: 13.01.2015 Сообщений: 12
	28.02.2015, 06:35 [ТС]
	Благодарю! 0

Оптимизация: изменить цвет кнопки и её значение в зависимости от выбранного элемента выпадающего меню

Решение