Как сделать что бы при клике на блок менялось содержимое другого блока?

Question

[DimaGhost]

Здравствуйте! Как сделать что бы при клике на блок менялось содержимое другого блока?
В каждом блоке указана своя стоимость:

Надо сделать так , что бы при нажатии на кнопку цена указанная в блоке показывалась в другом блоке:

Помогите кто знает, буду очень признателен!

Answer 1

[StelSik]

Можно добавить атрибут data-price со значением цены для кнопки или блока (тому, на что будет нажатие происходить) и значение этого атрибута вставлять в нужный блок
На jquery можно сделать примерно так (не проверял, написал находу):

$('.классБлокаПоКоторомуКликают').on('click', function(){
    $('.классБлокаКудаВставлятьЦену').text($(this).attr('data-price'));
})

Comments

[DimaGhost]

То есть задать атрибут data-price этим блокам, и на jQuery написать эту функцию?

[StelSik]

DimaGhost: Да, я бы сделал так :)

[DimaGhost]

DimaGhost: Спасибо ! Получилось!

Answer 2

[larionov_n]

Если использовать ООП и нормальный подход, то:

1) Создать модели для каждой сущности
2) Создать шаблоны или View - которые будут реагировать на изменения в моделях и рендерить представления, вызывая нужную бизнес логику через метод модели для калькуляции другой цены или запроса ее с сервера.
3) Использовать Publish/Subscribe, отправлять сообщения другим объектам (блокам) по клику или действию пользователя.

OneBlock.publish('eventName', data);
AnotherBlock.subscribe('eventName', function(data) {
   calculatePrice()
   showSomethingInAnotherBlock()
});

Использовать можно: Ember, React, Backbone, Radio, Marionette, ну и конечно VanillaJS :)
В общем проще когда на странице есть отдельные js объекты представляющие блоки и содержание, еще лучше если в проекте внедрена шина Radio. На клики подписываем triggers, fireEvent. Если все делает Backend, то вызывать через JSONP подобные callbacks.

Answer 3

[DimaGhost]

Если допустим я нажму на блок с ценой 6350 рублей , то и в том блоке тоже появиться эта стоимость