Если я правильно понял, то вот вам
пример
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();
});
Простой
