Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.09.2015, 23:11
Аспирант
Отправить личное сообщение для vettel Посмотреть профиль Найти все сообщения от vettel
 
Регистрация: 07.05.2015
Сообщений: 43

Многошаговое изменение кнопок
Здравствуйте.
Уже замучился сильно, думал несколько часов и ничего не придумал. На вас последняя надежда.

Есть небольшое приложение, связанное с ВК, типа чата.
Суть в том, что контакты разбиты на категории по городам и группам избранного. И над полем есть кнопки, которые должны при нажатии в зависимости от группы пользователя выводить то сообщение, которое ему надо. Но система многоуровневая, и вот в чем загвоздка.
Ссылку дать не могу, сервис под паролем, пока тестируется.

Вот изначальное состояние кнопок:


После нажатия на контакт, в зависимости от группы избранного, из файла XML происходит парсинг текста кнопок и они меняются:


Кнопки привет и пока не имеют в себе дочерних кнопок, поэтому при их нажатии сразу выводится текст:


И все получается. НО: дело в том, что при нажатии на те кнопки, у которых есть вложенные варианты (в данном примере - это "Спросить1" и "Напомнить1"), опять должен меняться текст кнопок на тот, лежит внутри тега button, в поле name. Если есть еще вложенные buttonы = то еще раз меняться, и т.д. Ну и кнопка "Назад" на месте "пятого" тоже должна появиться.

Первый шаг я сделал, а вот что делать дальше - так и не понял.
Для наглядности - сам файл XML с иерархией:

Код:
<?xml version="1.0" encoding="utf-8"?>

<favorites>
    <group id="1">
        <button name="привет1">
            <text city="1">
                Привет, город 1
            </text>
            <text city="2">
                Привет, город 2
            </text>
        </button>
        <button name="спросить1">
            <button name="о_погоде">
                <text city="1">
                    Спросить о погоде город 1
                </text>
                <text city="2">
                    Спросить о погоде город 2
                </text>
            </button>
            <button name="о_работе">
                <text city="1">
                    о работе город 1
                </text>
                <text city="2">
                    о работе город 2
                </text>
            </button>
        </button>
        <button name="напомнить1">
            <button name="о_детях">
                <text city="1">Спросить о детях город 1</text>
                <text city="2">Спросить о детях город 2</text>
            </button>
            <button name="о_задании">
                <text city="1">Спросить о задании город 1</text>
                <text city="2">Спросить о задании город 2</text>
            </button>
        </button>
        <button name="Пока1">
            <text city="1">Пока город 1</text>
            <text city="2">Пока город 2</text>
        </button>
    </group>
</favorites>
А вот мой код, который решает задачу только до первого шага, и то частично:
function changeButtonName() {
    var $this = $('ul.nav li.active');
    var favorite = $this.find('span.favorite_group').text().substring(1); // Метод substring добавлен, чтобы исключить пробел вначале
    var h_buttons = $('div.history_buttons ul.h_buttons').find('li.change_name');
    
    if (favorite.length == 0) {
        favorite = 1;
    }
    var city_name = $this.find('span.city_name').text().substring(1);
    //получение xml-файла с названиями кнопок и текстом
            $.ajax({
        type: "GET",
        url: "button_group.xml",
        dataType: "xml",

        success: function(xml){
        updateButton(xml);
            
        }
        });
    
    function updateButton(xml) {
        $(xml).find('group').each(function() {
        var $this_group = $(this);
        var step0 = [];
        var counter = 0;
        var group_id = $this_group.attr('id');
            if(group_id == favorite) {
                
                $this_group.children('button').each(function() {                    
                    var $this_button = $(this);
                    var text_name = $this_button.attr('name');
                    h_buttons.eq(counter).text(text_name);
                    //step0.push(text_name);
                                                                                               
                    //Определяем, есть ли в данную кнопку вложенные
                    var levels = $this_button.children('button');
                    if (levels.length == 0) {
                        $this_button.find('text').each(function() {
                            var this_sity = $(this).attr('city');
                            var text_area = $(this).text();                            
                            if (this_sity == city_name) {                                                            
                                addText(counter, text_area);                                
                            }
                        });
                    }
                         
                    counter++;
                })
                
            }    
        });
    }
    //END OF FUNCTION updateButton()
    
    function addText(number_of_button, text_content) {
        h_buttons.removeClass('active_click');
        h_buttons.eq(number_of_button).addClass('active_click').click(function() {
            $('#newMessageContainer').text(text_content);
        });
    }
}


Я понимаю, что задача сложная и нетривиальная, но я все-таки надеюсь на хоть какую-то помощь.

Последний раз редактировалось vettel, 23.09.2015 в 23:13.
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2015, 23:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

vettel,
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Неопределенное число кнопок wadim Общие вопросы Javascript 6 07.10.2014 20:05
Изменение состояния нескольких кнопок llelikys Общие вопросы Javascript 8 20.02.2014 15:45
изменение картинки при изменении урла и наведении курсора ahid Элементы интерфейса 2 09.02.2014 14:53
Один обработчик для нескольких кнопок! frundik Элементы интерфейса 2 10.07.2012 15:30
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 17:17