如果隐藏输入已更改，请更新变量

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);
});

更改隐藏输入值后，i 显示什么<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();
        }
    });

Answer 2

但是，您必须在更改值后立即进行切换。就像你创建一个函数，那么你可以在更改值后调用它。

您可以使用：

function doToggle(){
    var i = $("#hiddeninp").val();
    $('div[id^="div"]').hide(); // or add a common class="foo" = $('.foo').hide()
    $('#div'+i).show();
}
$("#inputvalue").click(function() {
    $("#hiddeninp").val(1);
    doToggle();
});

---

或者这个但不推荐：

$(document).on('click', function(e){
   var i       = $("#hiddeninp").val(),
       isinput = $(e.target).is('#inputvalue') || $(e.target).parent().is('#inputvalue');
   $('#div0').toggle(isinput && i == 0);
   $('#div1').toggle(isinput && i == 1);
});

Answer 3

尝试将检查输入值的操作放在单独的函数中，并在每次单击时调用 itr onload。

在这里试试这个：

$("#inputvalue").click(function() {
  if  ($("#hiddeninp").val() == 1) {
    $("#hiddeninp").val(0);
    $("#inputvalue").text("change input value to 1");
  } else {
    $("#hiddeninp").val(1);
    $("#inputvalue").text("change input value to 0");
  }
  checkStatus();
 
});
var checkStatus = function() {
  var myvar = $("#hiddeninp").val();
  if (myvar == 0) {
    $("#div1").hide();
    $("#div0").show();
  } else {
    $("#div0").hide();
    $("#div1").show();
  }
}
checkStatus();

div#inputvalue {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="hiddeninp" value="0">
<div id="inputvalue">change input value to 1</div>
<div style="display:none" id ="div0">div 1</div>
<div style="display:none" id ="div1">div 2</div>