更新，如果隱藏輸入改爲

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

嘗試把檢查輸入值的作用，在一個單獨的功能，並呼籲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>

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

我已經把我的答案在這裏作爲一個答案，而不是評論，所以我可以證明你的代碼如何看起來像。

您必須將if語句與hide和show放置在click事件函數中。因爲現在它只在頁面呈現時執行if語句。當你把它放在click事件函數中時，每次你點擊div時代碼都會被執行。這是必要的，因爲您必須在更改後檢查值。

您的代碼將成爲這個

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

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

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

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