現在HTML,Javascript(jQuery)を使ってアプリを作っています。
ボタン押下時にBoxが青になり、テキストボックス入力すると赤になるというものです。
↓コード
html
1 2<!DOCTYPE html> 3<html> 4<head> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 6<style> 7.box1{ 8 width: 150px; 9 height: 150px; 10 background-color: aqua; 11 margin-top: 20px; 12} 13.box2{ 14 width: 150px; 15 height: 150px; 16 background-color: red; 17 margin-top: 20px; 18 display: none; 19} 20</style> 21</head> 22<body> 23<input type="text" oninput="red(this)"> 24<input type="button" id="aqua" value="青を表示"> 25<div class="box1"></div> 26<div class="box2"></div> 27</body> 28<script> 29// ボタン押下時、「青」に変える 30$("#aqua").click(function(){ 31 $('div.box1').show(); 32 $('div.box2').hide(); 33}); 34 35// 「赤」に変える。oninput処理を何度も走らせないため1秒後に実行 36var timer = false; 37function red(_this){ 38 if (timer !== false) { 39 clearTimeout(timer); 40 } 41 timer = setTimeout(function(){ 42 $('div.box1').hide(); 43 $('div.box2').show(); 44 console.log(_this.value); 45 },1000); 46} 47 48// ボタンを押した時、常に「青」になるようにしたい。 49// 現状テキストボックス入力後、すぐにボタンを押すと最後「赤」になる 50// 秒数やsetTimeoutの処理は維持し、ただボタン押下時は常に青になるようにしたい 51 52</script> 53</html> 54
入力中、何度もログをはかないようにするためsetTimeoutとclearTimeoutを使っています。
また仕様としては、ボタン押下時は常に「青」を表示するようにします。
しかし現状、テキスト入力後、すぐボタンを押すと「青→赤」となり、最終的に「赤」になってしまいます。
これを常に「青」にしたいです。
さらにsetTimeoutとclearTimeoutの遅延させる処理は残したまま、希望する動きを実現したいです。
そのやり方がもしわかる方がいれば教えていただきたいです。よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/20 16:47 編集