Ich muss den Hintergrund von div basierend auf dem Wert einer Variablen bedingt ändern. Hier ist mein 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>

Ich bin nicht sicher, ob dies der beste Ansatz ist oder nicht, aber in beiden Fällen wird in Chrome der folgende Fehler angezeigt:

Uncaught SyntaxError: Unexpected token && 
0
Tithos 5 Dez. 2013 im 01:01

5 Antworten

Beste Antwort

Sie müssen Ihre beiden Bedingungen wie folgt in die gleichen Klammern setzen:

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

Der vollständig korrigierte 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>
-1
Samuel Bolduc 4 Juli 2016 im 15:49

Ich denke, mein Ansatz wäre es, die Hintergrund-URLs in einem Array zu speichern.

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

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

Mit dieser Lösung würden Sie die if / else-Anweisungen nicht benötigen. Für jedes Zehntel speichern Sie einen IMG-Namen im Array.

3
Jimmie Johansson 2 Feb. 2014 im 16:06

Wenn Sie nach einer anderen Lösung fragen, würde ich dies generisch tun. Ich würde Bilder wie 10.png, 20png, 30.png ... 100.png nennen

Und würde sie dann so etwas laden:

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

Sie werden es bearbeiten, aber ich hoffe, Sie haben den Punkt verstanden, dies hat nur 3 Zeilen. Sie können auch Bedingungen für Grenzdimensionen hinzufügen.

Und zu Ihrem Fehler: Ihrem Code

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

Sollte so sein:

if ((combo.hcs <= 10) && (combo.hcs >= 1))
1
Hrvoje Golcic 4 Dez. 2013 im 21:16

Sie sollten die Klammern nicht schließen. Die Klammern schließen die Bedingung ein:

if (combo.hcs <= 10 && combo.hcs >= 1)
        $(".myClass").css("background-image", "url('BB.png')";
0
Stew Abel 4 Dez. 2013 im 21:04

Betrachten Sie eine switch-Anweisung und einen präziseren Ansatz, um trockener und sauberer zu bleiben:

  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'");
1
Matanya 4 Dez. 2013 im 21:15