Question

我需要根据变量的值有条件地更改div的背景，这是我的代码：

<script type="text/javascript">
    $(document).ready(function(){
        if (combo.hcs <= 10) && (combo.hcs >= 1)
            $(".myClass").css("background-image", "url('BB.png')";
        else if (combo.hcs <= 20) && (combo.hcs >= 11)
            $(".myClass").css("background-image", "url('BH.png')";
        else if (combo.hcs <= 30) && (combo.hcs >= 21)
            $(".myClass").css("background-image", "url('BM.png')";
        else if (combo.hcs <= 40) && (combo.hcs >= 31)
            $(".myClass").css("background-image", "url('HB.png')";
        else if (combo.hcs <= 50) && (combo.hcs >= 41)
            $(".myClass").css("background-image", "url('HH.png')";
        else if (combo.hcs <= 60) && (combo.hcs >= 51)
            $(".myClass").css("background-image", "url('HM.png')";
        else if (combo.hcs <= 70) && (combo.hcs >= 61)
            $(".myClass").css("background-image", "url('MB.pmg')";
        else if (combo.hcs <= 80) && (combo.hcs >= 71)
            $(".myClass").css("background-image", "url('MH.png')";
        else if (combo.hcs <= 99) && (combo.hcs >= 81)
            $(".myClass").css("background-image", "url('MM.png')";
    }
</script>

我不确定这是否是最好的方法，但以太方式，我在Chrome中收到以下错误：

Uncaught SyntaxError: Unexpected token &&

Answer 1

我认为我的方法是将background-urls保存在数组中。

var imgs = ['BB.png','BH.png']; // etc in right order

var myIndex = Math.floor(combo.hcs/10);
$(".myClass").css("background-image", "url(" + imgs[myIndex] + ")");

使用此解决方案，您不需要if / else语句。对于每十分之一，您将img-name存储在数组中。

Answer 2

考虑使用switch语句和更简洁的方法来保持DRYer和更清洁：

  var bg;
  var x = combo.hcs;

switch (true) {
   case (x>0 && x<=10):
     bg = "BB";
     break;
   case (x>10 && x<=20):
     bg = "BH";
     break;

// etc....

}

$(".myClass").css("background-image", "url('" + bg + ".png'");

Answer 3

如果你要求一个不同的解决方案，我实际上会以一般的方式来做。我会将图像命名为10.png，20png，30.png ... 100.png

然后会加载这样的东西：

var imageName = Math.ceil(combo.hcs/10)*10
var imageFullName = imageName+'.png'
$(".myClass").css("background-image", "url('"+imageFullName+"')";

你会编辑它，但我希望你明白这一点，这只有3行。您还可以为边界尺寸添加条件。

关于你的错误：你的代码

if (combo.hcs <= 10) && (combo.hcs >= 1)

应该是这样的：

if ((combo.hcs <= 10) && (combo.hcs >= 1))

Answer 4

您不应该关闭括号。括号括起条件：

if (combo.hcs <= 10 && combo.hcs >= 1)
        $(".myClass").css("background-image", "url('BB.png')";

Answer 5

您需要在同一个括号中包含两个条件，如下所示：

else if (combo.hcs <= 99 && combo.hcs >= 81)

完整更正的代码：

<script type="text/javascript">
  $(document).ready(function(){
    if (combo.hcs <= 10 && combo.hcs >= 1)
      $(".myClass").css("background-image", "url('BB.png')");
    else if (combo.hcs <= 20 && combo.hcs >= 11)
      $(".myClass").css("background-image", "url('BH.png')");
    else if (combo.hcs <= 30 && combo.hcs >= 21)
      $(".myClass").css("background-image", "url('BM.png')");
    else if (combo.hcs <= 40 && combo.hcs >= 31)
      $(".myClass").css("background-image", "url('HB.png')");
    else if (combo.hcs <= 50 && combo.hcs >= 41)
      $(".myClass").css("background-image", "url('HH.png')");
    else if (combo.hcs <= 60 && combo.hcs >= 51)
      $(".myClass").css("background-image", "url('HM.png')");
    else if (combo.hcs <= 70 && combo.hcs >= 61)
      $(".myClass").css("background-image", "url('MB.pmg')");
    else if (combo.hcs <= 80 && combo.hcs >= 71)
      $(".myClass").css("background-image", "url('MH.png')");
    else if (combo.hcs <= 99 && combo.hcs >= 81)
      $(".myClass").css("background-image", "url('MM.png')");
  }
</script>

有条件地改变BG图像jQuery

5 个答案: