尝试使用此

Question

我有javascript与javascript的javascript问题，错误是在其他如果。看看每个决定我给控制台记录哪个条件运行。在第三个条件没有运行。

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条件：否则if（yoff> 90＆amp; xoff＆gt; 50）

当xoff＆gt; 50和yoff>然后，对于xoff>，首先满足1条件。 50.切勿检查其他情况。

所以你可以使用以下代码

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);
        }

Answer 2

尝试使用此

首先cond if（xoff> 50＆amp;＆amp;！（yoff＆gt;＆amp; xoff＆lt; 50 || yoff＆gt; 90＆amp;＆amp; xoff＆gt; 50））

＆＃13;

$(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 && !(yoff > 90 && xoff < 50 || yoff > 90 && 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);
}

＆＃13;

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;
}

＆＃13;

<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"/>
</div>
<br/>

＆＃13;

Javascript比较错误

2 个答案:

尝试使用此