Question

所有内容都在外部javascript文件中写入我在html中包含的内容我还有jquery链接。

我试图将if语句更改为代码中的不同位置，如果宽度不正确，我会看起来很周围，而且其他一些事情现在还没有发生。

当我更改$ foodcheck时。）宽度＆gt; '0px'到a＆lt;和其他如果到＆gt;警报确实有效，但是如果宽度= 0

，我只希望它弹出

我希望它能够回复提醒信息。

var $foodcheck = $('#greenfood');
if(($foodcheck).width > '0px') {

    document.getElementById("f").onclick = function(){

        var random = Math.random();

        if(random > 0.0 && random <= 0.5) {

            $("#greenfood").animate({width: "-=30px"});

        } else if(random > 0.9) {

            $("#greenfood").animate({width: "-=80px"});

        } else {

            $("#greenfood").animate({width: "140px"});

        }
    };
 } else if(($foodcheck).width =< '0px'){
        alert("Works");
    }

Answer 1

您的代码存在很多问题。

首先，＆＃34;＆gt;＆＃34;和＆＃34;＆lt;＆＃34;应该用数字来完成。因此，代码>"0px"在此上下文中没有意义，因为您实际上正在比较ASCII中字符的字典顺序。不是整数的值。

即

"a" < "b" //true as 'a' < 'b' => 97 > 98 (converted to ASCII numbers)
"ab" < "ac" // true as 'a' == 'a' and 'b' < 'c' 
"ab" < "ac" // true as 'a' == 'a' and 'b' < 'c'
"5px" > "11px" //true as '5' > '1'

你应该做的是比较值，如下所示：

5 > 11 //false as 5 < 11

以下是您更正后的代码：

var $foodcheck = $('#greenfood');
if($foodcheck.width() > 0) { // CHANGE: Additional Brackets were not needed. width should be width() 

    $("#f").click(function() { //This is the jquery way of doing events although your way also works
        var random = Math.random();

        if (random > 0.0 && random <= 0.5) {

            $foodcheck.animate({width: "-=30px"}); //IMPROVEMENT: used stored variable instead of finding the object again. 

        } else if(random > 0.9) {

            $foodcheck.animate({width: "-=80px"});

        } else {

            $foodcheck.animate({width: "140px"});

        }
    });
} else if ($foodcheck.width() =< 0){
        alert("Works");
}

Answer 2

我认为你在这一行上做错了：

($foodcheck).width > '0px')

应该是

($foodcheck).width > 0)

这一行：

else if(($foodcheck).width =< '0px')

应该是：

else if(($foodcheck).width =< 0)

Answer 3

else if(($foodcheck).width =< '0px'){

此代码抛出错误＆＃34;＆lt; =＆＃34;不是＆＃34; =＆lt;＆＃34;如果html的所有内容都没问题，并且你的元素有id =＆＃34; f＆＃34;这将解决它！

同样$foodcheck).width必须是$foodcheck).width() <= 0数字，而不是像您的示例

Answer 4

jQuery's width()以像素为单位返回计算出的宽度，因此您需要更新脚本才能正确调用它。（注意，它的一个函数需要括号）。

这是一个有效的例子：

＆＃13;

$(function(){
  
  var $foodcheck = $('#greenfood');
  if($foodcheck.width() > 0) {
    document.getElementById("f").onclick = function(){
        var random = Math.random();
        if(random > 0.0 && random <= 0.5) {
            $foodcheck.animate({width: "-=30px"});
        } else if(random > 0.9) {
            $foodcheck.animate({width: "-=80px"});
        } else {
            $foodcheck.animate({width: "140px"});
        }
    }
  } else {
     alert("$foodcheck is <= 0 or undefined");
  }
  
});

＆＃13;

#greenfood {background:green; width:200px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="greenfood">greenfood</div>
<button id="f">click</button>

＆＃13;

<强>更新
从您的评论中可以看出，您每次都要检查宽度。只需在onclick事件中移动宽度检查子句：

＆＃13;

$(function(){
  var $foodcheck = $('#greenfood');
  document.getElementById("f").onclick = function(){
        var random = Math.random();
    if($foodcheck.width() > 0) {
        if(random > 0.0 && random <= 0.5) {
            $foodcheck.animate({width: "-=30px"});
        } else if(random > 0.9) {
            $foodcheck.animate({width: "-=80px"});
        } else {
            $foodcheck.animate({width: "140px"});
        }
     } else {
        alert("$foodcheck is <= 0");
     }
  }
});

＆＃13;

#greenfood {background:green; width:200px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="greenfood">greenfood</div>
<button id="f">click</button>

＆＃13;

jquery if else不会发回警报消息

4 个答案: