javascript - 在 Swiped.min.js 文件中插入 z-index css 属性

Question

我面临有关样式属性的问题，由“swiped.min.js”中的某个元素设置。

当我点击一个按钮时，它正在定义 css 属性 transition & transform。我想为其添加一个属性z-index。

我一直在尝试解决它，但没有成功。我只是 js 的初学者，如果有人能指出如何将 z-index 添加到列表中，我将不胜感激。

! function() {
function t(t, e) {
    document.addEventListener(t, function(t) {
        a._elems.forEach(function(i) {
            for (var n = t.target; n;) {
                if (n === i.elem) return i[e](t), !1;
                n = n.parentNode
            }
            return !1
        })
    })
}

function e() {
    var t = [].shift.call(arguments),
        e = arguments[0];
    for (var i in e) e.hasOwnProperty(i) && (t[i] = e[i]);
    return t
}
var i = window.navigator.msPointerEnabled,
    n = {
        start: i ? "MSPointerDown" : "touchstart",
        move: i ? "MSPointerMove" : "touchmove",
        end: i ? "MSPointerUp" : "touchend"
    },
    o = function() {
        var t = window.getComputedStyle(document.documentElement, ""),
            e = (Array.prototype.slice.call(t).join("").match(/-(moz|webkit|ms)-/) || "" === t.OLink && ["", "o"])[1];
        return "-" + e + "-"
    }(),
    s = function() {
        var t, e = document.createElement("fakeelement"),
            i = {
                transition: "transitionend",
                OTransition: "oTransitionEnd",
                MozTransition: "transitionend",
                WebkitTransition: "webkitTransitionEnd"
            };
        for (t in i)
            if (void 0 !== e.style[t]) return i[t]
    }(),
    r = {
        transition: o + "transition",
        transform: o + "transform"
    },
    h = function() {},
    a = function(t) {
        var i = {
            duration: 200,
            tolerance: 50,
            time: 200,
            dir: 1,
            right: 0,
            left: 0
        };
        t = e(i, t || {}), this.duration = t.duration, this.tolerance = t.tolerance, this.time = t.time, this.width = t.left || t.right, this.elem = t.elem, this.list = t.list, this.dir = t.dir, this.group = t.group, this.id = a.elemId++, this.onOpen = "function" == typeof t.onOpen ? t.onOpen : h, this.onClose = "function" == typeof t.onClose ? t.onClose : h, this.right = t.right, this.left = t.left, (t.right > 0 && t.tolerance > t.right || t.left > 0 && t.tolerance > t.left) && console.warn("tolerance must be less then left and right")
    };
a._elems = [], a.groupCounter = 0, a.elemId = 0, a.init = function(t) {
    a.groupCounter++;
    var i = document.querySelectorAll(t.query),
        n = [];
    return delete t.query, [].forEach.call(i, function(i) {
        var o = e({
            elem: i,
            group: a.groupCounter
        }, t);
        n.push(new a(o))
    }), a._bindEvents(), a._elems = a._elems.concat(n), 1 === n.length ? n[0] : n
}, a._closeAll = function(t) {
    a._elems.forEach(function(e) {
        e.group === t && e.close(!0)
    })
}, a.prototype.transitionEnd = function(t, e) {
    function i() {
        e.call(n), t.removeEventListener(s, i)
    }
    var n = this;
    t.addEventListener(s, i)
}, a.prototype.touchStart = function(t) {
    var e = t.changedTouches[0];
    1 === t.touches.length && (this.touchId = e.identifier, this.x = e.pageX, this.y = e.pageY, this.startTime = new Date, this.resetValue(), this.list ? a._closeAll(this.group) : this.close(!0))
}, a.prototype.touchMove = function(t) {
    var e = t.changedTouches[0];
    this.isValidTouch(t) && (this.delta = e.pageX - this.x, this.dir = this.delta < 0 ? -1 : 1, this.width = this.delta < 0 ? this.right : this.left, this.defineUserAction(e), this.startSwipe && (this.move(), t.preventDefault()))
}, a.prototype.touchEnd = function(t) {
    this.isValidTouch(t, !0) && this.startSwipe && (this.dir * this.delta > this.tolerance || new Date - this.startTime < this.time ? this.open() : this.close(), t.stopPropagation(), t.preventDefault())
}, a.prototype.open = function(t) {
    this.animation(this.dir * this.width), this.swiped = !0, t || this.transitionEnd(this.elem, this.onOpen), this.resetValue()
}, a.prototype.close = function(t) {
    this.animation(0), this.swiped = !1, t || this.transitionEnd(this.elem, this.onClose), this.resetValue()
}, a.prototype.toggle = function() {
    this.swiped ? this.close() : this.open()
}, a.prototype.resetValue = function() {
    this.startSwipe = !1, this.startScroll = !1, this.delta = 0
}, a._bindEvents = function() {
    return a.eventBinded ? !1 : (t(n.move, "touchMove"), t(n.end, "touchEnd"), t(n.start, "touchStart"), void(a.eventBinded = !0))
}, a.prototype.defineUserAction = function(t) {
    var e = 10,
        i = 10;
    Math.abs(this.y - t.pageY) > i && !this.startSwipe ? this.startScroll = !0 : Math.abs(this.delta) > e && !this.startScroll && (this.startSwipe = !0)
}, a.prototype.isValidTouch = function(t, e) {
    var i = e ? "changedTouches" : "targetTouches";
    return t[i][0].identifier === this.touchId
}, a.prototype.move = function() {
    if (this.dir > 0 && (this.delta < 0 || 0 === this.left) || this.dir < 0 && (this.delta > 0 || 0 === this.right)) return !1;
    var t = Math.abs(this.delta);
    t > this.width && (this.delta = this.dir * (this.width + (t - this.width) / 8)), this.animation(this.delta, 0)
}, a.prototype.animation = function(t, e) {
    e = void 0 === e ? this.duration : e, this.elem.style.cssText = r.transition + ":" + r.transform + " " + e + "ms; " + r.transform + ":translate3d(" + t + "px, 0px, 0px)"
}, a.prototype.destroy = function(t) {
    var e = this.id;
    a._elems.forEach(function(t, i) {
        t.id === e && a._elems.splice(i, 1)
    }), t && this.elem.parentNode.removeChild(this.elem)
}, window.Swiped = a
}();

Answer 1

! function() {
function t(t, e) {
    document.addEventListener(t, function(t) {
        a._elems.forEach(function(i) {
            for (var n = t.target; n;) {
                if (n === i.elem) return i[e](t), !1;
                n = n.parentNode
            }
            return !1
        })
    })
}

function e() {
    var t = [].shift.call(arguments),
        e = arguments[0];
    for (var i in e) e.hasOwnProperty(i) && (t[i] = e[i]);
    return t
}
var i = window.navigator.msPointerEnabled,
    n = {
        start: i ? "MSPointerDown" : "touchstart",
        move: i ? "MSPointerMove" : "touchmove",
        end: i ? "MSPointerUp" : "touchend"
    },
    o = function() {
        var t = window.getComputedStyle(document.documentElement, ""),
            e = (Array.prototype.slice.call(t).join("").match(/-(moz|webkit|ms)-/) || "" === t.OLink && ["", "o"])[1];
        return "-" + e + "-"
    }(),
    s = function() {
        var t, e = document.createElement("fakeelement"),
            i = {
                transition: "transitionend",
                OTransition: "oTransitionEnd",
                MozTransition: "transitionend",
                WebkitTransition: "webkitTransitionEnd"
            };
        for (t in i)
            if (void 0 !== e.style[t]) return i[t]
    }(),
    r = {
        transition: o + "transition",
        transform: o + "transform"
    },
    h = function() {},
    a = function(t) {
        var i = {
            duration: 200,
            tolerance: 50,
            time: 200,
            dir: 1,
            right: 0,
            left: 0
        };
        t = e(i, t || {}), this.duration = t.duration, this.tolerance = t.tolerance, this.time = t.time, this.width = t.left || t.right, this.elem = t.elem, this.list = t.list, this.dir = t.dir, this.group = t.group, this.id = a.elemId++, this.onOpen = "function" == typeof t.onOpen ? t.onOpen : h, this.onClose = "function" == typeof t.onClose ? t.onClose : h, this.right = t.right, this.left = t.left, (t.right > 0 && t.tolerance > t.right || t.left > 0 && t.tolerance > t.left) && console.warn("tolerance must be less then left and right")
    };
a._elems = [], a.groupCounter = 0, a.elemId = 0, a.init = function(t) {
    a.groupCounter++;
    var i = document.querySelectorAll(t.query),
        n = [];
    return delete t.query, [].forEach.call(i, function(i) {
        var o = e({
            elem: i,
            group: a.groupCounter
        }, t);
        n.push(new a(o))
    }), a._bindEvents(), a._elems = a._elems.concat(n), 1 === n.length ? n[0] : n
}, a._closeAll = function(t) {
    a._elems.forEach(function(e) {
        e.group === t && e.close(!0)
    })
}, a.prototype.transitionEnd = function(t, e) {
    function i() {
        e.call(n), t.removeEventListener(s, i)
    }
    var n = this;
    t.addEventListener(s, i)
}, a.prototype.touchStart = function(t) {
    var e = t.changedTouches[0];
    1 === t.touches.length && (this.touchId = e.identifier, this.x = e.pageX, this.y = e.pageY, this.startTime = new Date, this.resetValue(), this.list ? a._closeAll(this.group) : this.close(!0))
}, a.prototype.touchMove = function(t) {
    var e = t.changedTouches[0];
    this.isValidTouch(t) && (this.delta = e.pageX - this.x, this.dir = this.delta < 0 ? -1 : 1, this.width = this.delta < 0 ? this.right : this.left, this.defineUserAction(e), this.startSwipe && (this.move(), t.preventDefault()))
}, a.prototype.touchEnd = function(t) {
    this.isValidTouch(t, !0) && this.startSwipe && (this.dir * this.delta > this.tolerance || new Date - this.startTime < this.time ? this.open() : this.close(), t.stopPropagation(), t.preventDefault())
}, a.prototype.open = function(t) {
    this.animation(this.dir * this.width), this.swiped = !0, t || this.transitionEnd(this.elem, this.onOpen), this.resetValue()
}, a.prototype.close = function(t) {
    this.animation(0), this.swiped = !1, t || this.transitionEnd(this.elem, this.onClose), this.resetValue()
}, a.prototype.toggle = function() {
    this.swiped ? this.close() : this.open()
}, a.prototype.resetValue = function() {
    this.startSwipe = !1, this.startScroll = !1, this.delta = 0
}, a._bindEvents = function() {
    return a.eventBinded ? !1 : (t(n.move, "touchMove"), t(n.end, "touchEnd"), t(n.start, "touchStart"), void(a.eventBinded = !0))
}, a.prototype.defineUserAction = function(t) {
    var e = 10,
        i = 10;
    Math.abs(this.y - t.pageY) > i && !this.startSwipe ? this.startScroll = !0 : Math.abs(this.delta) > e && !this.startScroll && (this.startSwipe = !0)
}, a.prototype.isValidTouch = function(t, e) {
    var i = e ? "changedTouches" : "targetTouches";
    return t[i][0].identifier === this.touchId
}, a.prototype.move = function() {
    if (this.dir > 0 && (this.delta < 0 || 0 === this.left) || this.dir < 0 && (this.delta > 0 || 0 === this.right)) return !1;
    var t = Math.abs(this.delta);
    t > this.width && (this.delta = this.dir * (this.width + (t - this.width) / 8)), this.animation(this.delta, 0)
}, a.prototype.animation = function(t, e) {
    e = void 0 === e ? this.duration : e, this.elem.style.cssText = r.transition + ":" + r.transform + " " + e + "ms; " + r.transform + ":translate3d(" + t + "px, 0px, 0px);" + " " + "z-index: 10000;"
}, a.prototype.destroy = function(t) {
    var e = this.id;
    a._elems.forEach(function(t, i) {
        t.id === e && a._elems.splice(i, 1)
    }), t && this.elem.parentNode.removeChild(this.elem)
}, window.Swiped = a
}();

你可以在这行代码中加入z-index

e = void 0 === e ? this.duration : e, this.elem.style.cssText = r.transition + ":"+ r.transform + ""+ e + "ms; "+ r.transform + ":translate3d("+ t + "px , 0px, 0px);"+ ""+ "z-index: 10000"