Question

我试图让这个工作：我在一个名为test.js的文件中有字符串变量。根据某些值，文件由php脚本创建，它表示如下：var test = 'up'或：var test = 'down'。

现在，我希望在我的网站上显示某个图像，具体取决于var test的值。所以在我的html代码中，我将其添加到标题中：

<script type="text/javascript" src="test.js"></script>

然后我写在身上：

<script type="text/javascript"> 

    function Test(){
        if (test == 'up'){
            document.getElementById("test").src = '/img/arrows/arrow_up.png';
        }
        else if (test == 'down'){
            document.getElementById("test").src = '/img/arrows/arrow_down.png'; 
        }
        else {
            document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
        }
    }
</script>

我在图片中加上：

<img id="test" src="" class="test">

但是，页面上不显示任何内容。有人可以帮助我吗？

Answer 1

你必须在某个地方调用Test()，当页面完全加载时，下面的代码执行它，所以另一个.js文件已经执行（test已经设置）并且页面上有<img>。

＆＃13;

var test = 'down';

function Test() {
  if (test == 'up') {
    document.getElementById("test").src = '/img/arrows/arrow_up.png';
  } else if (test == 'down') {
    document.getElementById("test").src = '/img/arrows/arrow_down.png';
  } else {
    document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
  }
}

window.onload = function() {
  Test()
};

＆＃13;

<img id="test" src="" class="test">

＆＃13;

Answer 2

首先，尝试手动设置src以查看src是否正确：

  <img id="test" src="/img/arrows/arrow_up.png" class="test">

如果有效，你应该在某个地方调用你的Test（）函数：

 window.onload = function() {
   Test();
 };

为简化起见，您可以使用JQuery（非强制性）：

你应该在你的html页面添加jquery引用（取决于你的脚本文件夹，链接可以改变）：

 <script src="~/Scripts/jquery-3.2.1.js"></script>

你可以改变你的Test（）方法：

  function Test(){
    debugger;
    if (test == 'up'){
        $("#test").attr("src", '/img/arrows/arrow_up.png');
    }
    else if (test == 'down'){
        $("#test").attr("src", '/img/arrows/arrow_down.png'); 
    }
    else {
        $("#test").attr("src", '/img/arrows/arrow_neutral.png');
    }
  }

最后，要检查测试参数是否正确，可以调试器以便在任何浏览器中调试代码。如果您打开浏览器的开发工具（通过在浏览器上按F12键），您可以调试代码。代码将点击调试器关键字。

基于变量操纵图像源

2 个答案: