Question

我试图了解javascript和DOM操作的一些基本原理，并且我遇到了重大障碍。我试着简单地改变风格来隐藏和展示。它会工作，但只有当我放入一个断点并逐步运行代码时。由于Chrome开发人员工具没有断点，因此无法工作。我在jQuery中写了一个等价物，并遇到了完全相同的问题。这是javascript：

＆＃13;

(function topping() {
  var x = document.getElementById('pizza').value;
  var y = document.getElementById('pizza');
  y.addEventListener('change', changeToppings);

  function changeToppings() {
    if (x == 'Sicilian') {
      document.getElementById('RegToppings').style.display = 'none';
      document.getElementById('SicToppings').style.display = 'block';
    } else if (x == 'Regular') {
      document.getElementById('SicToppings').style.display = 'none';
      document.getElementById('RegToppings').style.display = 'block';
    }
  }
})();

＆＃13;

#SicToppings {
  display: none;
}
#RegToppings {
  display: block;
}

＆＃13;

<content>
  <select id="pizza">
    <option id="Regular">Regular</option>
    <option id="Sicilian">Sicilian</option>


  </select>
  <br />
  <input type="checkbox" id="buddybox" />buddy
  <select size="5" id="SicToppings">
    <option>mushrooms</option>
    <option>pepperoni</option>
  </select>
  <select size="5" id="RegToppings">
    <option>olives</option>
    <option>pasta</option>
  </select>
</content>

＆＃13;

这里是jQuery：

$(document).ready(function() { $("#pizza").change(function () {
    var x = $("#pizza").value;
    if (x == "Sicilian")
    {
        $("#RegToppings").delay(1000).hide();
        $("#SicToppings").delay(1000).show();
    }
    else if (x == "Regular")
    {
        $("#SicToppings").delay(1000).hide();
        $("#RegToppings").delay(1000).show();
    }
    })
})

非常感谢您提供的任何帮助。我不只是在寻找解决方案，我试图弄清楚为什么会发生这种情况，我认为这与时间或回调有关，我知道这是javascript的一个主要组成部分必须明白。谢谢。

Answer 1

从我所看到的情况来看，纯Javascript版本的问题在于，您将pizza的值存储在页面开头的x中，而不是在更改选择时。这意味着它永远不会改变并保持为Regular。

将此行移至changeToppings()的开头似乎可以解决问题：

(function topping() {
  var y = document.getElementById('pizza');
  y.addEventListener('change', changeToppings);

  function changeToppings() {
    var x = document.getElementById('pizza').value;
    if (x == 'Sicilian') {
      document.getElementById('RegToppings').style.display = 'none';
      document.getElementById('SicToppings').style.display = 'block';
    } else if (x == 'Regular') {
      document.getElementById('SicToppings').style.display = 'none';
      document.getElementById('RegToppings').style.display = 'block';
    }
  }
})();

#SicToppings {
  display: none;
}
#RegToppings {
  display: block;
}

<content>
  <select id="pizza">
    <option id="Regular">Regular</option>
    <option id="Sicilian">Sicilian</option>


  </select>
  <br />
  <input type="checkbox" id="buddybox" />buddy
  <select size="5" id="SicToppings">
    <option>mushrooms</option>
    <option>pepperoni</option>
  </select>
  <select size="5" id="RegToppings">
    <option>olives</option>
    <option>pasta</option>
  </select>
</content>

Answer 2

请参阅@ Rhumborl对纯javascript的回答。

对于jQuery，$("#pizza").value;返回undefined。获取值的正确方法是$("#pizza").val();，但是您需要在HTML <option id="Regular" value="Regular">中指定值，否则它将返回标记内的文本（在这种情况下，我认为它也会起作用））

如何让它与调试点一起使用是超出我的。

简单的javascript只适用于断点

2 个答案: