javascript - 如果更改了隐藏输入，则更新变量

Question

首先我有一个隐藏的输入

<input type="hidden" id="hiddeninp" value="0">

当我点击这个 div 时，隐藏输入的值需要改变。 (示例 1)

<div id="inputvalue">change input value to 1</div>

我有 2 个额外的 div(不显示)

<div style="display:none" id ="div0">div 1</div>
<div style="display:none" id ="div1">div 2</div>

现在，当我点击 <div id="inputvalue"></div>隐藏的输入值必须以 1 为单位进行更改。

$("#inputvalue").click(function() {
  $("#hiddeninp").val(1);
});

隐藏输入值改变后，我要显示什么<div id ="div1"></div>并隐藏 <div id ="div0"></div> (当隐藏输入值为 0 时反之亦然)

var myvar = $("#hiddeninp").val();

if (myvar == 0) {
  $("#div1").hide();
  $("#div0").show();
} else {
  $("#div0").hide();
  $("#div1").show();
}

https://jsfiddle.net/e8a3ewj0/5/

Answer 1

我将我的答案作为答案而不是评论放在此处，以便我可以向您展示代码的外观。

您必须在点击事件函数中放置带有隐藏和显示的 if 语句。因为现在它只在页面呈现时执行 if 语句。当您将它放在单击事件函数中时，每次单击 div 时都会执行代码。这是必要的，因为您必须在更改后检查该值。

你的代码会变成这样

    $("#inputvalue").click(function() {
        $("#hiddeninp").val(1);

        var myvar = $("#hiddeninp").val();

        if (myvar == 0) {
          $("#div1").hide();
          $("#div0").show();
        } else {

          $("#div0").hide();
          $("#div1").show();
        }
    });