入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

js中的this和jquery click传入dom对象

创建时间:2017-02-07 投稿人: 浏览次数:1929

      函数中的 this 指的是函数作为哪个对象的方法被调用,this 就是那个对象。当函数作为构造函数通过 new 来使用时,this 指当下新建的对象。通过 addEventListener 注册的事件回调函数中的 this 指的是事件所注册的对象。

比如说我有一段js

var modifyCartProductNum = function (operate, that) {
    var thisDom= that;
    var cartIdDom = $(thisDom).parent().siblings().filter(".cartId");
    var cartNumDom = $(thisDom).siblings().filter(".num");
    var cartId = parseInt($(cartIdDom).text());
    var cartNum = parseInt($(cartNumDom).val());
    if (isNaN(cartId) || isNaN(cartNum)) {
        alert("出现错误");
        return;
    }
    if (operate == "+") {
        cartNum += 1;
    } else if (operate == "-") {
        if (cartNum == 1) {
            return;
        } else {
            cartNum -= 1;
        }
    }
    console.log("cartId=" + cartId + ";cartNum=" + cartNum);
    //TODO 这里对应 购物车修改产品数量API 要修改API 为购物车的id;同时通过util.js获取userId
    //TODO 这里与服务器交换 返回成功后 修改页面中的num
    var cartData = {
        cartId: cartId,
        userId: 3,
        cartNum: cartNum
    };
    $.ajax({
        url: "/aijialeFront/api/user/cart/modifyProductNum.json",
        type: "POST",
        data: cartData,
        dataType: "json",
        success: function (data) {
            console.log(data);
            if (data.code == 200) {
                $(cartNumDom).val(cartNum);
            } else {
                alert(data.error);
            }
        },
        error: function () {
            alert("服务器内部故障");
        }

    });
};

//TODO 这里要写blog 直接调用modifyCartProductNum(会执行一遍) 与在function中调用的区别
$("#content span.add").click(function () {
    modifyCartProductNum("+",this)
});
$("#content span.sub").click(function () {
    modifyCartProductNum("-",this)
});

如果modifyCartProductNum中  var thisDom=this;下面通过jquery通过dom关系就得不到相应的dom对象了,因为你调用了modifyCartProductNum函数此时是个变量,即通过modifyCartProductNum作为构造函数的一个对象,此时modifyCartProductNum函数中的this是指这个函数类型的对象。而这里

$("#content span.add").click(function () {
    modifyCartProductNum("+",this)
});

中的this是指$("#content span.add")的dom对象本身,因为你click函数调用了里面的函数里面的this就是dom对象

声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。