質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17506questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Java

    14409questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • jQuery

    7104questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • JSP

    959questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

jQuery スロット ストップできないです...

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 238

D-man

score 1

 前提・実現したいこと

jQueryを使ってjspファイル上に簡易的なスロットマシーンを作ろうとしているのですが、
スタートボタンで動かすことはできても、作成したボタンでストップをすることができません。

色々と調べたのですがわからないことが多くて困っています。
お助けお願いします

 該当のソースコード

```ここに言語名を入力  
<%@ page language="java" contentType="text/html; charset=UTF-8"  
pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script src="js/jquery-3.3.1.min.js"></script>  
<script src="js/jquery.easing.1.3.js"></script>  

<script>  
// スロット画像配列  
var slotImg = [ 'slot00.png', 'slot01.png', 'slot02.png', 'slot03.png',  
'slot04.png', 'slot05.png', 'slot06.png', 'slot07.png' ];  
// 縦に並べるスロット画像の数  
var slotNum = 500;  
// スロット画像のスタート位置  
var startPos = -30 * (slotNum - 3);  
// スロット画像の停止位置  
var stopPos = -150;  
// スロット移動の時間(ミリ秒)  
var moveTime = 5000;  

$(document).ready(function() {  
// A枠にスロット画像を生成  
slotCreate($("#slotsA .wrapper"));  
// B枠にスロット画像を生成  
slotCreate($("#slotsB .wrapper"));  
// C枠にスロット画像を生成  
slotCreate($("#slotsC .wrapper"));  
});  

/* スロット画像生成 */  
function slotCreate(obj) {  

// 枠内の要素をクリア  
obj.children().remove();  

// スロット画像のタグ生成  
for (var i = 1; i <= slotNum; i++) {  
// 画像ファイルは配列からランダムに取得  
var idx = Math.floor(Math.random() * slotImg.length);  
obj.append("<div class='slot'>"+ "<img border='0'"  
+ " src='img/" + slotImg[idx] + "'"  
+ " width='100' height='86' >"+ "</div>");  
}  

// スロット画像のスタート位置を設定  
obj.css({  
"margin-top" : startPos + "px"  
});  
}  

/* スロットスタート */  
function slotStart1(startstop) {  
// A枠のスロット画像移動  


slotMove($("#slotsA .wrapper"));  


}  

function slotStart2(startstop) {  
// 少し遅れてB枠のスロット画像移動  


setTimeout(function(obj) {  
slotMove(obj);  
}, 200, $("#slotsB .wrapper"));  

}  

function slotStart3(startstop) {  
// さらに少し遅れてC枠のスロット画像移動  


setTimeout(function(obj) {  
slotMove(obj);  
}, 400, $("#slotsC .wrapper"));  

}  

// スタートボタンの有効化  
$("#startBtn").prop('disabled', false);  

// キュー削除  
$(this).dequeue();  

/* スロット画像移動 */  
function slotMove(obj) {  

if (obj.css("margin-top") != startPos) {  
// スロットが動いた後であれば、スロット画像を再作成  
slotCreate(obj);  
}  

// スロット画像の移動アニメーション  
obj.animate({  
"margin-top" : stopPos + "px"  
}, {  
'duration' : moveTime,  
'easing' : $("#easing").val()  
});  
};  

function stopEle(target,clearQueue,jumpToEnd){  

$('#'+target).stop(clearQueue,jumpToEnd);  

// 枠内の要素をクリア  
obj.children().remove();  
}  
</script>  

<style>  
#slotsA, #slotsB, #slotsC {  
float: left;  
width: 200px;  
height: 240px;  
border: 2px solid;  
overflow: hidden;  
}  

#slotsA .wrapper , #slotsB .wrapper, #slotsC .wrapper  
{  
width: 200px;  
height: 80px;  
text-align: center;  
padding-top: 2px;  
}  
</style>  

</head>  
<body>  
<table>  
<tr>  
<td><div id="slotsA">  
<div class='wrapper'></div>  
</div></td>  
<td><div id="slotsB">  
<div class='wrapper'></div>  
</div></td>  
<td><div id="slotsC">  
<div class='wrapper'></div>  
</div></td>  
</tr>  
<tr>  
<td><input type="button"  name="stop1" value="!stop!" onclick="stopEle(slotsA,true,false)"></td>  
<td><input type="button"  name="stop2" value="!stop!" onclick="stopEle(slotsB,true,false)"></td>  
<td><input type="button"  name="stop3" value="!stop!" onclick="stopEle(slotsC,true,false)"></td>  
</tr>  
</table>  
<br style="clear: both">  
<br>  
<input type="button" value="スタート!" onclick="slotStart1(1),slotStart2(1),slotStart3(1)">  
<form action="/Slot/hitTable.jsp.jsp">  
<input type="submit" value="当たり一覧">  
</form>  
<form action="/Slot/result.jsp">  
<input type="submit" value="精算">  
</form>  



</body>  
</html>  

```

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/06 14:11

    代表的なもので結構ですので調べた記事などの提示は可能でしょうか。またインデントはきちんとしてください。バグの温床となりえます。1ファイルとはいえ、ソースコードが1つのコードブロックに全て入っているのは読みづらいので、html、CSS、JavaScriptは分割していただけますか?冒頭の```を```html ```css ```js のように言語名を入れると言語にあわせてハイライトしてくれます。PCであれば質問編集画面に右側にリアルタイムでプレビューが表示されるのでそちらを見ながら調整してください。

    キャンセル

  • D-man

    2018/07/06 16:06

    ご指導ありがとうございます! インデントに気を付けて今後ソースを組みたいと思います!

    キャンセル

  • mts10806

    2018/07/06 16:07

    質問は編集できるので今の内から対応してもらったほうが。

    キャンセル

回答 2

checkベストアンサー

+2

SE-studying-nowさんの便乗になってしまい、申し訳ありません・・。

$('#'+target +' .wrapper').stop(clearQueue,jumpToEnd); // .wrapperの前に半角スペースを空ける。


加えて、おそらく以下の部分、
*slotsA、slotsB、slotsC、をシングルクオーテーションで囲む。

<td><input type="button"  name="stop1" value="!stop!" onclick="stopEle('slotsA',true,false)"></td>  
<td><input type="button"  name="stop2" value="!stop!" onclick="stopEle('slotsB',true,false)"></td>  
<td><input type="button"  name="stop3" value="!stop!" onclick="stopEle('slotsC',true,false)"></td>  


で出来そうな気がします。

ブラウザデバッガーのconsole.log();をうまく使いましょう!

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/06 15:52

    wrapperは子要素なので半角スペース入れないとですね。
    ご指摘ありがとうございます!

    キャンセル

  • 2018/07/06 15:53

    こちらこそ、なんかすみません。。^^;

    キャンセル

  • 2018/07/06 16:12

    とても分かりやすかったです! ありがとうございます!
    半角スペースを入れるなど分からないことが多いです…
    今後勉強しておきます!

    キャンセル

+2

slotMove()でアニメーションを仕掛けているのはdivのslotsA、slotsB、slotsCの子要素のdiv(class=wrapper)ですが、stopEle()内でアニメーションの停止を指示している対象が親要素のslotsA、slotsB、slotsCとなっています。

一例として、以下のようにしてアニメーションの停止ができないでしょうか。

function stopEle(target,clearQueue,jumpToEnd){  

    $('#'+target +'.wrapper').stop(clearQueue,jumpToEnd);  

    // 枠内の要素をクリア  
    obj.children().remove();  
} 

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/06 16:13

    回答ありがとうございます!
    改良の参考にさせていただきます!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17506questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Java

    14409questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • jQuery

    7104questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • JSP

    959questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。