Question

我真的不熟悉javascript，我需要处理这个小任务。此任务的主要思想是从Flask读取输入，并根据该输入更改网站和背景上的数字。数字和值的更改没有问题，但是我似乎无法弄清楚如何更改背景。

<!DOCTYPE html>
<html>
<head>
</head>
<style>

  .bggif1 {
background-image: url(Alert.gif);
}

.bggif2 {
background-image: url(Driving.gif);
}

.bggif3 {
background-image: url(Pulling.gif);
}

<table>

<thead><tr><th>Current action</th></tr></thead>
<tbody><tr><td>{{ vaction }}</td></tr></tbody>

</table>

<script>
if vaction === "Driving"
   bggif2
if vaction === "Sounding The Alarm"
   bggif1
if vaction === "Pulling"
   bggif3
</script>
</body>
</html>

这是一个示例代码，我不需要完成的代码，我将不胜感激任何提示或建议，因为我被困在根据{{ vaction }}变量进行更改的背景上。

代码的Python部分：

print('Are the eyes Open or Closed?: ')
estate1 = input()
print('Does the Driver look to the Front or to the Side?(Front or Side): ')
hstate1 = input()
print('Is The body facing Front or to the Side? (Front or Side): ')
bstate1 = input()
print('Is the car functioning properly? (Working or NotWorking): ')
vstate1 = input()
vaction1 = 'Driving'

# Outcomes of the answers
if estate1 == 'Closed':
    elevel1 = 2
else:
    elevel1 = 1

if hstate1 == 'Side':
    hlevel1 = 2
else:
    hlevel1 = 1

if bstate1 == 'Side':
    blevel1 = 2
else:
    blevel1 = 1

if vstate1 == 'NotWorking':
    vlevel1 = 2
else:
    vlevel1 = 1


# Vehicle actions according to the answers
if elevel1 == 2 or hlevel1 == 2 or blevel1 == 2:
    vaction1 = 'Sounding The Alarm'
if elevel1 == 1 and hlevel1 == 1 and blevel1 == 1 and vlevel1 == 1:
    vaction1 = 'Driving'
if vlevel1 == 2:
    vaction1 = 'Pulling over'


# Inputs are being over writen as the website page variables
@app.route("/")
def home():
    return render_template("Index.html", estate=estate1, hstate=hstate1, 
bstate=bstate1, vstate=vstate1, vaction=vaction1, elevel=elevel1, 
          hlevel=hlevel1, blevel=blevel1, vlevel=vlevel1)

Answer 1

您正在从服务器（Flask服务器）获取vaction值，并且正在使用Jinja模板，因此您需要将脚本更改为

var vaction = "{{vaction}}";
  if(vaction === "Driving")
    // do something
  else if(vaction === "Sounding The Alarm")
    //do something
  else if(vaction === "Pulling")
    // do something

代替

if vaction === "Driving"
   bggif2
if vaction === "Sounding The Alarm"
   bggif1
if vaction === "Pulling"
   bggif3

甚至没有定义vaction，您需要使用{{}}作为模板变量

Answer 2

尝试一下

const bg = {
  "Driving": "bggif2",
  "Sounding The Alarm": "bggif1",
  "Pulling": "bggif3"
}

const vaction = "Sounding The Alarm"; // "{{vaction}}"

document.querySelector("body").classList.add(bg[vaction]);

.bggif1 {
  background-image: url(http://www.pngall.com/wp-content/uploads/2017/05/Alert-Download-PNG.png);
}

.bggif2 {
  background-image: url(Driving.gif);
}

.bggif3 {
  background-image: url(Pulling.gif);
}

<table>
  <thead>
    <tr>
      <th>Current action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sounding The Alarm</td>
    </tr>
  </tbody>
</table>

Answer 3

类似这样的函数将更改id = bggif的元素的背景

    const changeImage = () => {
        if (vaction === "Driving") {
            document.querySelector("#bggif").style.backgroundImage = "url('Driving.gif')"
        } else if (vaction === "Sounding The Alarm") {
        document.querySelector("#bggif").style.backgroundImage = "url('Alert.gif')"
        } else {
        document.querySelector("#bggif").style.backgroundImage = "url('Pulling.gif')"
        }
    }

根据变量更改背景图像

3 个答案: