По клику кнопки показать div с другими кнопками?

Question

[Денис Васильев]

Как реализовать показ рис.2 по нажатию на любой div из рис.1 ?

Comments

[georgich]

Приветствую.
Верстаете два блока с кнопками. У второго, который на рис. 2, display: none. Затем ставите блоку на рис. 1 display: none, а у второго убираете это свойство. Все через jQuery.

Answer 1

[Александр]

делаете два блока
div#first
button
button
......
div#second // этому блоку прописать дисплей ноне
button
button
......
и небольшой скрипт

$("div#first button").click(function(){
// скрыть родительский контейнер
$(this).parent().hide();
// показать контейнер с кнопками из второго блока
$("#second").show();
});

Answer 2

[Bowen]

Если я правильно понял, то вот вам пример

P.S. Небольшой пример, а дальше вы уже сами думаю разберетесь.

<div class="iphone__container">
    <ul class="iphone__list iphone__models">
        <li class="iphone__li iphone__model iphone__model_6s" data-model="6S">iPhone 6s</li>
        <li class="iphone__li iphone__model iphone__model_6+" data-model="6+">iPhone 6+</li>
    </ul>
    <ul class="iphone__list iphone__problems">
        <li class="iphone__li iphone__problem" data-problem='{"id":"screen","prices":{"6S":"700","6+":"0"}}'>Замена <br/> экрана</li>
        <li class="iphone__li iphone__problem" data-problem='{"id":"window","prices":{"6S":"100","6+":"0"}}'>Замена <br/> стекла</li>
    </ul>
</div>
<div class="iphone__total">
    <span class="iphone__total-title">Стоимость:</span>
    <span class="iphone__total-value"></span>
</div>

.iphone__problems {
    display: none;
}

var App = {
    init: function(){
        this.iPhones.init();
    },
    
    /**
     * iPhones
     */
    iPhones: {
        init: function(){
            // Container
            this.container = '.iphone__container';
            
            // List
            this.list = '.iphone__list';
            
            // List items
            this.li = '.iphone__li';
            
            // Models list
            this.models = '.iphone__models';
            
            // Models
            this.model = '.iphone__model';
            
            // Problems list
            this.problems = '.iphone__problems';
            
            // Problem
            this.problem = '.iphone__problem';
            
            // Total
            this.total = '.iphone__total';
            
            // Total value
            this.totalValue = '.iphone__total-value';
            
            // Active model
            this.activeModel = '';
            
            // Sum
            this.sum = 0;
            
            // Allowed models
            this.allowedModels = ['SE','4','4S','5','5c','5S','6','6+','6s'];
            
            // Action! Action! Action!
            $(this.container).on('click', this.li, this.events);
        },
        
        /**
         * Events
         */
        events: function(){
            // Link to object
            var iPhones = App.iPhones;
            
            // Get clicked element
            var $el = $(this);
            
            // Get model
            var model = $el.data('model') || false;
            
            // Get problem
            var problem = $el.data('problem') || false;
            
            if (model) {
                iPhones.activeModel = model;
                $(iPhones.list).toggle();
            }
            
            if (problem) {
                iPhones.getPrice(problem.id, iPhones.activeModel, function(price){
                    if (problem.prices[iPhones.activeModel] == price) {
                        $el.addClass('active').off('click');
                        iPhones.sum += price;
                        $(iPhones.totalValue).text(iPhones.sum);
                    } else {
                        $(iPhones.list).toggle();
                        alert('Hacking attempt');
                    }
                });
            }
        },
        
        /**
         * Get price
         * @param problem
         * @param model
         * @param cb
         */
        getPrice: function(problem, model, cb){
            var list = {
                'screen': {
                    'prices': {
                        'SE': 500,
                        '4': 400,
                        '4S': 450,
                        '5': 500,
                        '5C': 530,
                        '5S': 550,
                        '6': 600,
                        '6+': 650,
                        '6S': 700
                    }
                },
                'window': {
                    'prices': {
                        'SE': 500,
                        '4': 400,
                        '4S': 450,
                        '5': 500,
                        '5C': 530,
                        '5S': 550,
                        '6': 600,
                        '6+': 700,
                        '6S': 100
                    }
                }
            };
            return cb(problem && model ? list[problem].prices[model] : 0);
        }
    } 
};
$(function(){
    App.init(); 
});

Comments

[Денис Васильев]

Bowen Вот вроде все тут понятно! что и зачем следует и какие функции выполняет! Но чего-то не хватает, в первом скрипте нужно дописать видимо выполнение этой функции, после нажатия проблемы, а как это сделать? т.е. выбор модели - скрыть - выбор проблемы - скрыть - показать итог.. как-то так

[Денис Васильев]

Напишите в скайп - отблагодарю! good...job

[Bowen]

1. Не уверен что понял.
2. Достаточно сказать «Спасибо»

Answer 3

[Orbb]

Зависит от того, будут ли после нажатия каждой кнопки вылезать каждый раз уникальные кнопки, т.е. за каждым аппаратом они будут разные, а так же от того, нужно ли понимать какой аппарат->проблему выбрал юзер.

Если просто нажатие - то два блока, один спрятан, при клике на верхний показываем спрятанный, прячем верхний.

Если надо передавать значения - код будет посложней, так как надо фиксировать данные, на какие кликал юзер.

Еще у вас ошибка в выберете

Comments

[Денис Васильев]

За ВЫБЕРЕТЕ спасибо )) а что насчет передачи значений!? я сделал как подсказал Bowen, но нужно еще и скрывать те блоки + для каждого из блоков будет присвоена цена, которая потом складывается

[Денис Васильев]

Денис Васильев: Руслан поможете разобраться?

[Orbb]

Денис Васильев: data-price='' атрибут присвойте каждому блоку с услугой, на родителя блоков с селектором детей вешаете обработчик на клик, затем манипулируете блоками и считаете :)

[Orbb]

$('#parent child').click(function(){ //code});

[Денис Васильев]

Руслан а можно прям на моем примере, буквально по паре услуг. За денежку конечно