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

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

您可以使用：

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 2

我把答案放在这里作为答案而不是评论，这样我就可以告诉你代码的样子。

您必须在if事件函数中放置带有hide和show的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 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>

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

3 个答案: