jQueryの書き方の質問です。

補足にある外部ファイル jquery.q.js は、jQueryでカウントダウンと、liタグの文字クリックで "xxxxx" を表示する関数を試しに作ってみたのですが、ワンクリックで quesFunc() だけでなくもう一つの関数 countDown() にも干渉したいのですが書き方がわからずにいます。


liタグの文字をクリックしたらカウントダウンをストップし、そのストップした残秒数を <input type="hidden" name="time" value=""> に渡したいのです。
どのような書き方になるでしょうか?


よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/10/02 16:23:25
  • 終了:2013/10/03 13:20:33
id:appfb

質問者から

appfb2013/10/02 18:44:50

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<{$content_type|smarty:nodefaults}>
<link href="<{$root_surl}>css/master.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../js/jquery.q.js" type="text/javascript"></script>
<script>


$(function(){ //---カウントダウン
	var timelimit = '<{$timelimit}>';
	var m = getFinishTime(parseInt(timelimit, 10));
	countDown(m);
});
$(function(){ //---テスト
	$("ul>li").click(quesFunc);
});
</script>
</head>

<body>
<div id="Timer"></div>
<ul>
	<li id="1">テスト1</li>
	<li id="2">テスト2</li>
	<li id="3">テスト3</li>
</ul>
<form id="nextquizBtn" action="<{$url}>" method="post" target="_self">
	<input type="hidden" name="id" value="<{$id}>">
	<input type="hidden" name="time" value="">
	<input type="submit" value="次へ">
</form>

</body>
</html>



jquery.q.js

// --- カウントダウン
function getFinishTime(e){
	var datetime = new Date();
	return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
}
function countDown(m){
	var startTime = new Date();
	var endTime = new Date(m);
	var diff	= endTime - startTime;
	var times	= 24 * 60 * 60 * 1000;
	var sec		= Math.floor(diff % times / 1000) % 60 % 60
	if(diff > 0){
		$("#Timer").text(sec);
		setTimeout(function(){
			countDown(m);
		}, 10);
	}else{
		// 終了した時のテキスト
		$("#Timer").text('Time Over !!');
	}
}

// --- クリックアクション
var selectID;
function quesFunc(){
	if (selectID == this.id) return;
	$(this).addClass("selected");
	$("#" + selectID).removeClass("selected");
	this.innerText = "xxxxx"
}

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4595ベストアンサー獲得回数19342013/10/02 17:27:58

ポイント100pt

例えば、こんな感じ。

$(function(){ //---テスト
    $("ul>li").click(function() {
        quesFunc();
        countDown();
    });
});

jQuery 的には、こうした方が良いのかも。

$(function(){ //---テスト

    $("ul>li")
        .click(quesFunc)
        .click(countDown);

});

目立つように改行してますが、一行に続けて書いても同じです。

$(function(){ //---テスト

    $("ul>li").click(quesFunc).click(countDown);

});




(追記、というか、書き直しです)
先の回答は、ばっさり無視してください。

外部スクリプトに、ちょっと手を加えてみました。
★が末尾についている行が、追加(×4)・変更(×1)した行です。

var continue_count_down = true; // ★

// --- カウントダウン
function getFinishTime(e){
    var datetime = new Date();
    return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
}
function countDown(m){
    var startTime = new Date();
    var endTime = new Date(m);
    var diff    = endTime - startTime;
    var times   = 24 * 60 * 60 * 1000;
    var sec     = Math.floor(diff % times / 1000) % 60 % 60
    if(continue_count_down && diff > 0){        // ★
        $("#Timer").text(sec);
        setTimeout(function(){
            countDown(m);
        }, 10);
    }else if (diff > 0){        // ★
        $("#nextquizBtn input[name='time']").val(Math.floor(diff / 1000));      // ★
    }else{
        // 終了した時のテキスト
        $("#Timer").text('Time Over !!');
    }
}

// --- クリックアクション
var selectID;
function quesFunc(){
    if (selectID == this.id) return;
    $(this).addClass("selected");
    $("#" + selectID).removeClass("selected");
    this.innerText = "xxxxx"
    continue_count_down = false;    // ★
}

name="time" の type を "text" に変えて、実際に残り秒数が入るのを確認してみてください。

他2件のコメントを見る
id:a-kuma3

回答に追記しました(というか、書き直しですね ><)。

2013/10/02 18:41:27
id:appfb

バッチリ動作しました!
ありがとうございます。
type を "text"に変更して、値が取れていることも確認しました。


jQuery というより JavaScript を、苦手としてきましたが、教えていただいたことを逆にたどるとそうでもない気がしてきます。

$("ul>li").click(quesFunc).click(countDown);
の書き方も今後必要な時があると思いますので、勉強になりまた助かります。
ありがとうございました。

2013/10/02 19:33:04

その他の回答(0件)

id:appfb

質問者から

appfb2013/10/02 16:25:08

質問文を編集しました。詳細はこちら

id:a-kuma3 No.1

a-kuma3回答回数4595ベストアンサー獲得回数19342013/10/02 17:27:58ここでベストアンサー

ポイント100pt

例えば、こんな感じ。

$(function(){ //---テスト
    $("ul>li").click(function() {
        quesFunc();
        countDown();
    });
});

jQuery 的には、こうした方が良いのかも。

$(function(){ //---テスト

    $("ul>li")
        .click(quesFunc)
        .click(countDown);

});

目立つように改行してますが、一行に続けて書いても同じです。

$(function(){ //---テスト

    $("ul>li").click(quesFunc).click(countDown);

});




(追記、というか、書き直しです)
先の回答は、ばっさり無視してください。

外部スクリプトに、ちょっと手を加えてみました。
★が末尾についている行が、追加(×4)・変更(×1)した行です。

var continue_count_down = true; // ★

// --- カウントダウン
function getFinishTime(e){
    var datetime = new Date();
    return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
}
function countDown(m){
    var startTime = new Date();
    var endTime = new Date(m);
    var diff    = endTime - startTime;
    var times   = 24 * 60 * 60 * 1000;
    var sec     = Math.floor(diff % times / 1000) % 60 % 60
    if(continue_count_down && diff > 0){        // ★
        $("#Timer").text(sec);
        setTimeout(function(){
            countDown(m);
        }, 10);
    }else if (diff > 0){        // ★
        $("#nextquizBtn input[name='time']").val(Math.floor(diff / 1000));      // ★
    }else{
        // 終了した時のテキスト
        $("#Timer").text('Time Over !!');
    }
}

// --- クリックアクション
var selectID;
function quesFunc(){
    if (selectID == this.id) return;
    $(this).addClass("selected");
    $("#" + selectID).removeClass("selected");
    this.innerText = "xxxxx"
    continue_count_down = false;    // ★
}

name="time" の type を "text" に変えて、実際に残り秒数が入るのを確認してみてください。

他2件のコメントを見る
id:a-kuma3

回答に追記しました(というか、書き直しですね ><)。

2013/10/02 18:41:27
id:appfb

バッチリ動作しました!
ありがとうございます。
type を "text"に変更して、値が取れていることも確認しました。


jQuery というより JavaScript を、苦手としてきましたが、教えていただいたことを逆にたどるとそうでもない気がしてきます。

$("ul>li").click(quesFunc).click(countDown);
の書き方も今後必要な時があると思いますので、勉強になりまた助かります。
ありがとうございました。

2013/10/02 19:33:04

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません