人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryを使って下記のようなソースを組んだのですが、問題があります。
下記のソースを実行していただくとわかると思いますが、
「右へ」と「左へ」のボタンを押すとID「test」が左右へ動くのですが、例えば「右へ」を2回押すと枠を飛び出してしまいます。
理想的な動作として、
1、「右へ」を一回押すとスクリプトが実行されて右へ移動し且つ2度同じ方向へ動かないように「右へ」移動するスクリプトがロックされる。
2、「右へ」を押した後、「左へ」を押すとスクリプトが実行され左へ移動しロックされていた「右へ」のスクリプトが解除される。そして今度は「左へ」移動するスクリプトがロックされる。

■サンプル
http://www.geocities.jp/qntbd042/demo/test.html

上記のサンプルで足りないスクリプトを教えて下さい。

●質問者: 雨の日
●カテゴリ:インターネット ウェブ制作
✍キーワード:jQuery test スクリプト ソース ボタン
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● suenaga3
●60ポイント ベストアンサー

今のつくりなら、単純にフラグを入れるのが簡単かと思います。

$(function() {
 var pos_rightp = false; // 右だったらTrue
 $("#btn_left").click(function() {
 if(!pos_rightp) {
 $("#test").animate({left: '+=180px'},'nomal');
 pos_rightp = true; // 右に移動したのでTrue
 });
 $("#btn_right").click(function() {
 if(pos_rightp) {
 $("#test").animate({left: '-=180px'},'nomal');
 pos_rightp = false; // 左に移動したのでFalse
 }
 });
});
◎質問者からの返答

ありがとうございます!

おっしゃられる通り無事動きました。


2 ● suenaga3
●10ポイント

連投すみません。

なんだかカッコを間違って消してコピペしてしまいました。

$(function() {
 var pos_rightp = false; // 右だったらTrue
 $("#btn_left").click(function() {
 if(!pos_rightp) {
 $("#test").animate({left: '+=180px'},'nomal');
 pos_rightp = true; // 右に移動したのでTrue
 }
 });
 $("#btn_right").click(function() {
 if(pos_rightp) {
 $("#test").animate({left: '-=180px'},'nomal');
 pos_rightp = false; // 左に移動したのでFalse
 }
 });
});

コメントが有効でないのでこちらに書かせていただきました。

こちらにポイントは要りません。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ