Categories
javascript(jQuery) ホームページ制作・作成

複数ある input type="button" の値を jQuery で取得

複数あるボタンで、どれかボタンをクリックした場合、ページ遷移なしで処理を実行させたい。

そんなご要望があり、いろいろと悩んだ事から、忘れないようここに残しておこうかと。。。

「ページ遷移なし」とのことから、Ajax になるのだけど、検索しても type=”radio”,type=”checkbox”,select の選択値を取得する方法ばかり。。。type=”button” でクリックされたボタンの値を取得する方法が見当たらず。。。
個々のボタンに form タグを付けようか、id を加えようかと試行錯誤した結果が以下のコード。input タグに class を振ったけど ul に id を付けて :button でも。

HTML

<form><ul>
<li><input type="button" name="no" value="1" class="btn"></li>
<li><input type="button" name="no" value="2" class="btn"></li>
<li><input type="button" name="no" value="3" class="btn"></li>
<li><input type="button" name="no" value="4" class="btn"></li>
<li><input type="button" name="no" value="5" class="btn"></li>
</ul></form>

Javascript

$('.btn').click(function(){
	var selectNo = $(this).val();
	alert(selectNo);
}

あとは、ajax で値を送ればOK!

[mokurenCB]

Categories
javascript(jQuery) WordPress ホームページ制作・作成

楽しいページ

数日前、私自身も所属している「麻小おやじの会」のページを作成しました。

http://asaoyag.hotcom-cafe.com

jQueryとパララックス

JarallaxというjQueryのプラグインを利用いています。このプラグインは、ページのスクロールにあわせてパーツを動かすものです。言葉で説明するより実際にページをみていただければわかると思います。ちょっと楽しいです。

但し、欠点が! Internet Explorer のバージョンが8以前の場合、動きません。IE9以降が必要です。
また、スマートフォンでの閲覧でもNGです。

近日、上記 Jarallax のようなプラグインの人気は高まっており、Jarallax 以外でも以下のプラグインがあります。デモを覗くと楽しいですよ。「jQuery パララックス」で検索すると多数ヒットします。

サーバー

選択したサーバーは、freeweb。フリーサーバーです。でも、WordPressが使えます。FTP接続でファイルのアップもできます。無料の理由は、各ページ最下部に表示されるテキスト広告1行のみです。

実際に使ってみて、時間帯によりFTP接続によるファイルのアップでエラーになることがあります。混んでいるときなんでしょうねぇ。。。

Categories
javascript(jQuery)

ページ上でjQueryによる計算

某サイトに載せようと思う内容をここに記載。
inputタグに数値を入力し、javascriptを用いて計算結果を表示させる。

Javascript

$(function(){
	$( ".num" ).change(function(){
		$( "#ans01" ).text( Number( $( "#num01" ).val() ) + Number( $( "#num02" ).val() ) );
		$( "#ans02" ).text( Number( $( "#num03" ).val() ) - Number( $( "#num04" ).val() ) );
		$( "#ans03" ).text( Number( $( "#num05" ).val() ) * Number( $( "#num06" ).val() ) );
		if( Number( $( "#num08" ).val() ) == 0 ){
			$( "#ans04" ).text( "無限大" );
		}else{
			$( "#ans04" ).text( Number( $( "#num07" ).val() ) / Number( $( "#num08" ).val() ) );
		}
	});
});

HTML

<form>
<p><input type="text" value="0" id="num01" class="num"> + <input type="text" value="0" id="num02" class="num"> = <span id="ans01"></span></p>
<p><input type="text" value="0" id="num03" class="num"> - <input type="text" value="0" id="num04" class="num"> = <span id="ans02"></span></p>
<p><input type="text" value="0" id="num05" class="num"> * <input type="text" value="0" id="num06" class="num"> = <span id="ans03"></span></p>
<p><input type="text" value="0" id="num07" class="num"> / <input type="text" value="1" id="num08" class="num"> = <span id="ans04"></span></p>
</form>