更新変数隠さ入力はすべての

Question

最初に変更された場合、私はこのdiv要素をクリックしたとき、私は、隠し入力

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

を持つ隠し入力の値は変更する必要があります。私は1

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

に変更する必要があります <div id="inputvalue"></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 ="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文を配置する必要が

$("#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(); 
}); 

---

またはこの1ではなく、お奨めを：

$(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

私は見ることができますので、私が代わりにコメントの答えとして、ここで私の答えを入れているあなたが使用することができます

あなたはどのようにコードが見えるようになります。

clickイベント機能でhideとshowを使用してifステートメントを配置する必要があります。今は、ページがレンダリングされるときにif文だけを実行するためです。クリックイベント関数に配置すると、divをクリックするたびにコードが実行されます。これは、変更後に値をチェックする必要があるため、必要です。

あなたのコードは別の関数では、入力値をチェックするアクションを入れてみてくださいとのonloadとすべてのクリックにITRを呼び出すこの

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

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

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

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