JavaScript 比较错误

Question

我在使用 javascript 和 jquery 时遇到奇怪的问题，错误出现在 else if 上。查看我给出的每个决定，控制台记录运行的条件。第三个条件不运行。

var offset = $(el).offset();
    var x = (e.pageX - offset.left);
    var y = (e.pageY - offset.top);
    var w = $(el).width();
    var h = $(el).height();
    var xoff = Math.round((x / w * 100)).toFixed(2);
    var yoff = Math.round((y / h * 100)).toFixed(2);
    if(xoff > 50){
            var x = w - (e.pageX - offset.left);
            var html = '<tag style="top:'+y+'px;right:'+x+'px">Brand here</tag>';
            console.log("1");
    }
    else if(yoff  > 90 && xoff < 50){
            var y = h - (e.pageY - offset.top);
            var html = '<tag style="bottom:'+y+'px;left:'+x+'px">Brand here</tag>';
            console.log(2);
    }
    else if(yoff > 90 && xoff > 50){
            var y = h - (e.pageY - offset.top);
            var x = w - (e.pageX - offset.left);
            var html = '<tag style="bottom:'+y+'px;right:'+x+'px">Brand here</tag>';
            console.log(3)
    }
    else{ 
            var html = '<tag style="top:'+y+'px;left:'+x+'px">Brand here</tag>';
            console.log(4);
    }
    console.log("xoff:"+xoff,"yoff:"+yoff);

$(document).ready(function(){

        $("img").on("click",function(e){
                tag($(this),e ,$(this).parent());
        });

});


function tag(el,e,parent){
        var offset = $(el).offset();
        var x = (e.pageX - offset.left);
        var y = (e.pageY - offset.top);
        var w = $(el).width();
        var h = $(el).height();
        var xoff = Math.round((x / w * 100)).toFixed(2);
        var yoff = Math.round((y / h * 100)).toFixed(2);
        if(xoff > 50){
                var x = w - (e.pageX - offset.left);
                var html = '<tag style="top:'+y+'px;right:'+x+'px">Brand here</tag>';
                console.log("1");
        }
        else if(yoff  > 90 && xoff < 50){
                var y = h - (e.pageY - offset.top);
                var html = '<tag style="bottom:'+y+'px;left:'+x+'px">Brand here</tag>';
                console.log(2);
        }
        else if(yoff > 90 && xoff > 50){
                var y = h - (e.pageY - offset.top);
                var x = w - (e.pageX - offset.left);
                var html = '<tag style="bottom:'+y+'px;right:'+x+'px">Brand here</tag>';
                console.log(3)
        }
        else{ 
                var html = '<tag style="top:'+y+'px;left:'+x+'px">Brand here</tag>';
                console.log(4);
        }
        console.log("xoff:"+xoff,"yoff:"+yoff);

        $(parent).append(html);
}

body {
    position: relative;
    display: block;
    margin: 0px;
    text-align: center;
    background:#333;
}

.img-holder {
    position: relative;
    display: block;
    background: #344;
    color: white;
    width: 620px;
    overflow: hidden;
    margin: 0px auto;
}
tag {
    position: absolute;
    z-index: 2;
    background: rgba(0,0,0,0.7);
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-holder">
<img src="https://i.guim.co.uk/img/media/ffd0bb82dddcf8df68b31ce6f87c05f6ef53e1a9/0_21_4000_2399/master/4000.jpg?w=620&q=55&auto=format&usm=12&fit=max&s=37ddefa05a4851b5071e6139c6858c07">
</img>
</div>
<br/>

Answer 1

您的第三个条件无效，因为第三个条件始终为假

1 个条件: if(xoff > 50)

3个条件: else if(yoff > 90 && xoff > 50)

当 xoff > 50 且 yoff > 90 时，对于 xoff > 50，首先将满足 1 个条件。切勿检查其他条件。

所以你可以使用下面的代码

if(xoff > 50 && yoff < 90){
                var x = w - (e.pageX - offset.left);
                var html = '<tag style="top:'+y+'px;right:'+x+'px">Brand here</tag>';
                console.log("1");
        }
        else if(yoff  > 90 && xoff < 50){
                var y = h - (e.pageY - offset.top);
                var html = '<tag style="bottom:'+y+'px;left:'+x+'px">Brand here</tag>';
                console.log(2);
        }
        else if(yoff > 90 && xoff > 50){
                var y = h - (e.pageY - offset.top);
                var x = w - (e.pageX - offset.left);
                var html = '<tag style="bottom:'+y+'px;right:'+x+'px">Brand here</tag>';
                console.log(3)
        }
        else{ 
                var html = '<tag style="top:'+y+'px;left:'+x+'px">Brand here</tag>';
                console.log(4);
        }