0

Здравствуйте.

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

1 ответ 1

1

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: здесь нет разделения логики и представления, что в конечном счете приведет к каше.

пример на jsfiddle

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.