javascript - jquery或者js事件绑定的问题

Question

现在想实现功能如下图

其中*个商品是异步更改的，用户点击加入购物车之后，页面不刷新，直接变化数量和金额。

现在不想要上面的黑框，只想把数量*扔到右边的小框里。

不想在用调用接口的方法实现。

我只是知道augular有类似的事件绑定，

不知道能不能通过js或者jquery实现这个小功能呢？

现在我只是把上面的黑长框display none 然后

    // 同步商品数量
$(function(){

    $('.cartnum').text($("#cart-total").text().substring(0,2));
   
})

这样只是拿到了个商品之间的，需要刷新才能同步。。

谢谢~

Answer 1

直接编写函数更新状态就行了

Answer 2

就是在dom里B元素随着A元素的更改而更改，而A元素又是异步生成的，真个阶段页面不刷新

方法1 监听A异步执行方法完成，然后回调用修改B元素的函数
方法2 定时check页面上元素的变化-效率差些
例如

(function(){
    var bOrg=$(A).text();
    var checkInterval=setInterval(function(){
        var currentb=$(A).text();
        if(currentb!=bOrg){
            clearInterval(checkInterval);
            onBChanged(bOrg,currentb);
        }
    },1000);
    
    function onBChanged(oldValue,newValue){
        console.log('old:%s new:%s',oldValue,newValue);
    }
}());

Answer 3

A元素是异步生成的，生成完就用回调函数执行渲染B元素的函数。
这不就行了？
或者无法用以上方法，那试试这个插件
jQuery.my – 实时的复杂的双向数据绑定

Answer 4

var dfd = Deferred();
//当*个商品异步更改时:
getNum(function (data) {
    //设置黑框的数据
    setNum(data);
    dfd.resolve(data);
});
dfd.done(function (data) {
    $el.trigger("MY_EVENT", {data:data});
});
//设置购物车数据
$el.on("MY_EVENT", function (e, data) {
    setNum(data);
});

主要就是应用trigger方法。

Answer 5

两个方向考虑实现：
法一：在现有基础上实现（能和服务器同步，避免差异），在你顶部黑长框那获取个数代码中的回调函数处添加右侧购物车数字变化的代码，实现同步商品数量。

法二：在添加商品的按钮上绑定click事件，实现点击右侧购物车数字改变即可（未和服务器同步，有可能会出现差异）。