小于/小于或等于运算符无法正常工作答案

【问题标题】：Less than / Less than or equal operator doesn't work properly小于/小于或等于运算符无法正常工作
【发布时间】：2018-01-25 21:47:23
【问题描述】：

带有 setInteval 功能的非常简单的滑块。如果这种情况有一些规则，请为我澄清。我有 5 张幻灯片，其中只有 3 张显示，然后滑块转到“margin-left”=“0”位置，没有显示最后 2 张幻灯片。 只有在“margin-left”达到“2000px”或更多之后，我才在代码中编写返回“margin-left”=“0”（每张幻灯片为 500px，我有 5 张幻灯片）。 换句话说，滑块在达到“1000px”“margin”后会返回，尽管我写的是“2000px”或更多。

我的 html 是 500px

; 2500px

； 5个500px的

在

里面，我不使用overflow:hidden来展示会发生什么。

<style>
    #container {
        height: 400px;
        border: 4px solid red;
    }

        #container ul {
            list-style-type: none;
            height: 100%;
            padding: 0px;
            display: flex;
            transition: all 1s ease
        }

            #container ul li {
                width: 100%;
                height: 100%
            }

                #container ul li:nth-child(1) {
                    background-color: yellow;
                    opacity: 0.5;
                }

                #container ul li:nth-child(2) {
                    background-color: green;
                    opacity: 0.5
                }

                #container ul li:nth-child(3) {
                    background-color: red;
                    opacity: 0.5
                }

                #container ul li:nth-child(4) {
                    background-color: teal;
                    opacity: 0.5
                }

                #container ul li:nth-child(5) {
                    background-color: grey;
                    opacity: 0.5
                }
</style>
<body>
    <div id="container" style="width:500px;">
        <ul style="margin:0px; width:2500px;">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

Javascript 方面：

<script>
    ul_list = document.getElementsByTagName("ul")[0];
    li_list = document.getElementsByTagName("li");
    li_width = parseFloat(document.getElementById("container").style.width);
    el_width = li_width;
    li_array = Array.prototype.slice.call(li_list, 0);

    function carousel() {
        /*THIS IS MY PROBLEM, return to marginLeft = 0 when marginLeft = -2000px or more,
       in reality it executes if statement when -1000px is reached*/
        if (ul_list.style.marginLeft <= -((li_width * li_array.length) - li_width) + "px") {
            ul_list.style.marginLeft = 0 + "px";
            el_width = li_width;
        }
        else {
            ul_list.style.marginLeft = -el_width + "px";
            el_width += li_width;
        }
    }

    function call() {
        call_carousel = setInterval(carousel, 3000);
    }
    call();
</script>

【问题讨论】：

一目了然，您可以通过添加“px”来比较字符串。 “-2000”作为字符串大于“-1000”，因为它在字符串中搜索第一个不相同的字符，然后获取其索引。 “2” > “1”。也许这已经是你的问题了。尝试剥离 px 并对结果执行 parseInt()。
为什么要比较两个字符串？
我确实忽略了它，谢谢！

标签： javascript html

【解决方案1】：

您的逻辑不起作用，因为“.marginLeft”调用返回的值是一个字符串。

试试这个：

var ulMarginLeft = parseInt(ul_list.style.marginLeft);

【讨论】：

【解决方案2】：

添加一个新的实用函数，例如：

function getInt(value) {
  return parseInt(value.match(/\d+/)[0]);
}

然后修改比较像：

var marginLeft = getInt(ul_list.style.marginLeft);
var arrayMargin = getInt((li_width * li_array.length) - li_width) * -1;

// Check the values once in console for debugging
console.log( marginLeft, arrayMargin)

if (marginLeft <= arrayMargin ) {
  // Your code here....
}

【讨论】：