CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tithos
Tithos

Reputation: 1437

Conditionally Change BG image jQuery

I need to conditionally change the background of div based on the value of a variable here is my code:

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

I am not sure if this is the best approach or not but ether way, I am getting the following error in Chrome:

Uncaught SyntaxError: Unexpected token &&

Upvotes: 0

Views: 951

Answers (5)

Samuel Bolduc
Samuel Bolduc

Reputation: 19183

You need to include your two conditions inside the same brackets, like this :

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

The complete corrected code :

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

Upvotes: -1

Jimmie Johansson
Jimmie Johansson

Reputation: 1972

I think my approach would be to save the background-urls in an array.

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

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

With this solution you would not need the if/else statements. For every tenth, you store an img-name in the array.

Upvotes: 3

Hrvoje Golcic
Hrvoje Golcic

Reputation: 3686

If you ask for a different solution, I would actually do it in a generic way. I would name images like 10.png, 20png, 30.png... 100.png

and then would load them something like this:

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

you will edit it but I hope you got the point, this has only 3 lines. You can also add conditions for boundary dimensions.

And about your error: your code

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

should be like this:

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

Upvotes: 1

Matanya
Matanya

Reputation: 6346

Consider a switch statement and a more concise approach to remain DRYer and cleaner:

  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'");

Upvotes: 1

Stew Abel
Stew Abel

Reputation: 33

You shouldn't be closing the brackets. The brackets enclose the condition:

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

Upvotes: 0

Related Questions