0

我做了一些代码来改变我的图像位置

此代码可以运行一次，但不能运行第二次。

function prev() {
                    if(document.getElementById("bookCon").style.left=="0px"){}
                    else {
                        document.getElementById("bookCon").style.right-="800px";
                    }
                }
                function next() {
                    if(document.getElementById("bookCon").style.left=="5000px") {}
                    else { 
                        document.getElementById("bookCon").style.right+="800px";
                    }
                }

第二版……也不行。

function getStyleNum(item,prop) {
            if (typeof item == "string") { item = document.getElementById(item); }
            return parseInt(item.style[prop],10);
        }
        function prev() {
            var item = document.getElementById("bookCon");
            if (getStyleNum(item,"right") !== 0) {
                var val = getStyleNum(item, "right");
                item.style.right = (val - 800) + "px";
            }
        }
        function next() {
            var item = document.getElementById("bookCon");
            if (getStyleNum(item,"right") !== 1600) {
                var val = getStyleNum(item, "right");
                item.style.right = (val + 800) + "px";
            }
        }
4

1 回答 1

3

您的代码存在多个问题：

  1. 你不能这样做+= "800px"，因为你最终会得到类似的东西，"500px800px"因为这些是字符串。
  2. 你不能对字符串做数学运算。
  3. 你无法可靠地比较"0px"
  4. 您检查 的值.left并设置 的值.right。您应该只使用其中一个，而不是同时使用两者。
  5. 您的代码可能会更干燥（不重复）
  6. 直接在对象上读取样式属性不会包含通过样式表设置的任何内容

如果style.left值是直接在对象上设置的（而不是最初来自样式表）并且您的对象已定位，那么您可以使用这种类型的逻辑（转换为数字）。我不确切地知道您通过检查.left然后更改来尝试完成什么，.right所以这只是对您的逻辑的猜测，但是您应该能够看到您如何做这种事情的一般想法。

function prev() {
    var item = document.getElementById("bookCon");
    if (parseInt(item.style.left, 10) != 0) {
        var val = parseInt(item.style.right, 10) || 0;
        item.style.right = (val - 800) + "px";
    }
}

你可能会发现这个 util 函数很有用：

function getStyleNum(item, prop) {
    if (typeof item == "string") {
        item = document.getElementById(item);
    }
    return parseInt(item.style[prop], 10) || 0;
}

function prev() {
    var item = document.getElementById("bookCon");
    if (getStyleNum(item, "left") != 0) {
        var val = getStyleNum(item, "right");
        item.style.right = (val - 800) + "px";
    }
}

PS我还是不明白你为什么要检查 的值.left然后修改.right. 在给定时间，其中只有一个可以处于活动状态。

工作演示：http: //jsfiddle.net/jfriend00/awjv9/

于 2013-11-13T19:19:36.443 回答