javascript - 如何在项目中使用多个if条件

Question

感谢您的帮助。我遇到了麻烦，我无法解决这个简单的问题。请帮助我。

我的代码是:-

<?php 

        $sel="select * from demo1 where paper_type='Quantitative'"; 
        $exe=mysql_query($sel);
        while($rt=mysql_fetch_array($exe))
        {
            $array_val[]=$rt['condition'];  
        }

    ?>
<script>

    var val1 = "<?php echo($array_val[0]); ?>";
    var val2 = "<?php echo($array_val[1]); ?>";
    var val3 = "<?php echo($array_val[2]); ?>";
    var val4 = "<?php echo($array_val[3]); ?>";
    var val5 = "<?php echo($array_val[5]); ?>";

    if(val1 == "a" )
    {
        document.getElementById("imgClick1").src = "images/a.jpg";
        document.getElementById('num1').style.color = "#000";
    }
    else if(val1 == "b")
    {   document.getElementById("imgClick1").src = "images/b.jpg";
        document.getElementById('num1').style.color = "#fff";
    }
    if(val2 == "a" )
    {
        document.getElementById("imgClick2").src = "images/a.jpg";
        document.getElementById('num2').style.color = "#000";
    }
    else if(val2 == "b")
    {
        document.getElementById("imgClick2").src = "images/b.jpg";
        document.getElementById('num2').style.color = "#fff";
    }
    if(val3 == "a" )
    {
        document.getElementById("imgClick3").src = "images/a.jpg";
        document.getElementById('num3').style.color = "#000";
    }
    else if(val3 == "b")
    {
        document.getElementById("imgClick3").src = "images/b.jpg";
        document.getElementById('num3').style.color = "#fff";
    }
</script>

使用 php 我从 MySQL 获取值到 php 数组 '$array_val[]' 并将该值放入 javascript 变量但是当我尝试使用 if 条件检查它时，它只在第一个 if 条件下工作。

请帮助我，我怎样才能使用其他 if 条件？

Answer 1

在这种情况下，我建议使用 JSON。

检查以下使用 JSON 实现的解决方案以解决您的问题。

var json=JSON.parse('<?php echo json_encode($array_val)?>');

//process your json array here

for(key in json){  //for each elements in json array

     //default image and color
     var image_src = "images/default.jpg";
     var color = "#aaa";

      switch(json[key]){
        case "a":{
                  //code for a
                  image_src = "images/a.jpg";
                  color = "#000";
                  break;
        }
        case "b":{
                  //code for b
                  image_src = "images/b.jpg";
                  color = "#fff";
                  break;
        }
      }

      document.getElementById("imgClick"+(key+1)).src=image_src; // it will generate imgClick1, imgClick2 selectors and so on.. for each element of json
      document.getElementById("num"+(key+1)).style.color=color; // it will generate num1, num2 selectors and so on.. for each element of json
}

编辑:原始代码的解决方案

在 echo 之前测试 $array_val[index]，这样只有当它的值被定义时它才会echo。

在这种情况下，它会将 valN 变量的值设为 "" 空白字符串，这样它就不会匹配任何一个 "a" 或 “b”。 (如果未定义值，您可能想在此处指定一些默认情况，否则情况)

var val1 = "<?php if(isset($array_val[0]) echo $array_val[0] ?>"; //you might add here else echo "a"; to specify some default value.
var val2 = "<?php if(isset($array_val[1]) echo $array_val[1] ?>";
var val3 = "<?php if(isset($array_val[2]) echo $array_val[2] ?>";
var val4 = "<?php if(isset($array_val[3]) echo $array_val[3] ?>";
var val5 = "<?php if(isset($array_val[4]) echo $array_val[4] ?>";

if(val1 == "a" )
{
    document.getElementById("imgClick1").src = "images/a.jpg";
    document.getElementById('num1').style.color = "#000";
}
else if(val1 == "b")
{   document.getElementById("imgClick1").src = "images/b.jpg";
    document.getElementById('num1').style.color = "#fff";
}

if(val2 == "a" )
{
    document.getElementById("imgClick2").src = "images/a.jpg";
    document.getElementById('num2').style.color = "#000";
}
else if(val2 == "b")
{
    document.getElementById("imgClick2").src = "images/b.jpg";
    document.getElementById('num2').style.color = "#fff";
}

if(val3 == "a" )
{
    document.getElementById("imgClick3").src = "images/a.jpg";
    document.getElementById('num3').style.color = "#000";
}
else if(val3 == "b")
{
    document.getElementById("imgClick3").src = "images/b.jpg";
    document.getElementById('num3').style.color = "#fff";
}