Здравствуйте.
Как на джаваскрипте сделать так, чтобы задать в нем цену товара и менять ее только в самом скрипте, и чтобы одновременно с этим она менялась во всех нужных местах?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуJavascript и HTML сами по себе никак не связаны: есть только набор тегов script, которые указывают на файлы js. На этом "обязательная" связь заканчивается.
Обычно для вашей задачи применяют библиотеки типа angular или ember, которые реализуют MVC-паттерн. Однако сразу предупреждаю, что они будут на порядок сложнее, чем jQuery и применяются для построения большого приложения, в котором связка js - отображаемые данные в html является просто компонентом и одной из основ для построения этого приложения.
Легкий и правильный путь, когда кроме вышеописанного функционала ничего не нужно, в целом будет выглядеть так:
HTML:
<div class="product" data-product-id="35">
...
<div class="price">
<span role="price-value">36.6</span> <span role="price-currency">рублей</span>
</div>
</div>
JS (на основе jQuery):
function Product(id) {
var price;
var currency;
function init() {
price = $('[data-product-id="'+id+'"] [role="price-value"]').text();
currency = $('[data-product-id="'+id+'"] [role="price-currency"]').text();
};
this.updatePrice = function(_price, _currency) {
_currency = _currency || currency;
$('[data-product-id="'+id+'"] [role="price-value"]').text(_price);
$('[data-product-id="'+id+'"] [role="price-currency"]').text(_currency);
currency = _currency;
price = _price;
};
this.getPrice = function() {return price;};
this.getCurrency = function() {return currency;};
init();
}
var product = new Product(35);
product.updatePrice(70, '$');
После этого остается только дергать product.updatePrice, который обновит одновременно и данные в инстансе, и на странице, достаточно лишь верно указывать атрибуты data-* и role. NB: здесь нет разделения логики и представления, что в конечном счете приведет к каше.