javascript - 在javascript中更新div背景图像

Question

我在这里找到了我想要完成的类似示例，但我不确定我在实现中到底做错了什么。

我有一个包含 2 个组件的 div:一个背景图像和 5 个标签。

    <div id="graph" class="graphs" style="display: block">
        <div id="chart">
        </div>
        <div id="symbol" class="symbols">
            <div id="symbol1" class="ticker" onclick="showg()"></div>
            <div id="symbol2" class="ticker" onclick="showg()"></div>
            <div id="symbol3" class="ticker" onclick="showg()"></div>
            <div id="symbol4" class="ticker" onclick="showg()"></div>
            <div id="symbol5" class="ticker" onclick="showg()"></div>
        </div>
    </div>

我的JavasScript如下:

var portfolios = [
{ "ticker1" : "LLNW", "ticker2" : "AOL", "ticker3" : "DATA", "ticker4" : "PUBN", "ticker5" : "YUME",  }, ];
document.getElementById("symbol1").innerHTML = portfolios[0].ticker1;
document.getElementById("symbol2").innerHTML = portfolios[0].ticker2;
document.getElementById("symbol3").innerHTML = portfolios[0].ticker3;
document.getElementById("symbol4").innerHTML = portfolios[0].ticker4;
document.getElementById("symbol5").innerHTML = portfolios[0].ticker5;

function showg(){
var currentTicker = this.innerText;
document.getElementById("chart").style.backgroundImage= "url('"+ currentTicker +" -    GRAPH.png')";}

我的每个图像都被命名​​为 currentTicker-GRAPH.png(即 LLNW-GRAPH.png)。

我认为我正在做的是设置我正在运行 showg() 函数的 div 的innerHTML，并将其称为 currentTicker。然后我尝试使用 + '-GRAPH.png' 来更改背景图像样式。 (目前，我的图像都与我的 .js、.css、.html 文件位于同一文件夹中)。

我很确定我错误地执行了 currentTicker 变量声明...但不确定如何执行。

任何帮助将不胜感激。

Answer 1

您需要在函数调用中传递元素，如下所示:

onclick="showg(this)"

你的功能将是:

function showg(el) {
    var currentTicker = el.innerText;
    document.getElementById("chart").style.backgroundImage= "url('"+ currentTicker +" -    GRAPH.png')";
}

因为 this 代表函数内的 window 元素，而不是单击的元素。