Question

我正在为一家销售带有自定义文字的夹克的网上商店编写一个功能。

我创建的代码会根据下拉菜单中选择的内容更改字体样式。这很好。

在某些夹克样式上，线条必须移动位置，或根本不显示。因此，我使用“顶部”和“显示”样式属性来向上或向下移动线条，或显示“无”，再次根据选定的夹克样式从下拉列表中指定要完成的内容。

我遇到的问题是我创建的代码仅在我进行一次更改时才会进行更改，但随后的下拉列表更改将不会执行。

我觉得我必须在这段代码中遗漏一些简单的东西（见下文）。

有什么想法吗？

<script>

 document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById("productSelect-option-2").addEventListener("change", function() { 

var font = document.getElementById("productSelect-option-2").value;
    if (font == "Script")
      document.getElementById("jacket_text").style.fontFamily = "Helvetica,sans-serif";
    if (font == "Futura")
      document.getElementById("jacket_text").style.fontFamily = "Futura,sans-serif";
});

  document.getElementById("productSelect-option-0").addEventListener("change", function() { 

var jacketStyle = document.getElementById("productSelect-option-0").value;
    if (jacketStyle == "Cannes")
      document.getElementById("output_bottom").style.display = "";
      document.getElementById("output_top").style.top = "9%";
      document.getElementById("output_bottom").style.top = "19%";
    if (jacketStyle == "Provence")
      document.getElementById("output_bottom").style.display = "block";
      document.getElementById("output_top").style.top = "9%";
      document.getElementById("output_bottom").style.top = "19%";
    if (jacketStyle == "Vienne")
      document.getElementById("output_bottom").style.display = "block";
      document.getElementById("output_top").style.top = "9%";
      document.getElementById("output_bottom").style.top = "16%";
    if (jacketStyle == "Champagne")
      document.getElementById("output_bottom").style.display = "block";
      document.getElementById("output_top").style.top = "9%";
      document.getElementById("output_bottom").style.top = "13%";
    if (jacketStyle == "Versailles")
      document.getElementById("output_top").style.top = "9%";
      document.getElementById("output_bottom").style.display = "none";
    if (jacketStyle == "Le Man")
      document.getElementById("output_top").style.top = "9%";
      document.getElementById("output_bottom").style.display = "none";
});

});  
</script>

Answer 1

没关系。我想通了。

愚蠢的错误，但我并不是非常了解javascript，而是将这一切拼凑在一起：

错过了每个＆＃34的{}大括号;如果＆＃34;言。

Javascript样式，来回切换

1 个答案: