プログラム初心者です。
下記のようなjavascript(Ajax)を作りました。
forなどで、もう少しシンプルに書く方法はありますか?
var check = ['link0', '#link1','#link2'];
$(check[0]).click(function () {
処理A
});
$(check[1]).click(function () {
処理A
});
$(check[2]).click(function () {
処理A
});
※処理Aは同じ処理
どうぞ宜しくお願い致します。
No.4ベストアンサー
- 回答日時:
forの場合
for (key in check) {
$(check[key]).click ( function() {
if(this.checked) {
thwrite();
} else {
thremove();
}
for (key in check) {
if ($(check[key]).attr('id') == this.id) {
$(".cell"+key).toggle(this.checked);
}
}
});
}
eachの場合
$.each(check, function(x,y){
$(y).click(function (){
if(this.checked) {
thwrite();
} else {
thremove();
}
$(".cell"+x).toggle(this.checked);
})
});
No.3
- 回答日時:
jQueryの引数(セレクタ)はCSSセレクタのルールに準拠しているので、こういう書き方はできませんか?
var check = ['#link0', '#link1','#link2'];
$(check.join(',')).click(function(){
処理A
});
未検証です。
>No.1補足
処理内容が違ってれば、別々に書かなきゃ無理ですね。
一定のルールがあれば、そのルールをプログラムに書き直せば良いですが。
この回答への補足
ご回答有難うございます。
.joinというものもあるんですね!勉強します。
大変便利なので、他のシーンがあった時、是非活用させていただきます。
no.2のLancerVIIさんの書き込みにコードを補足させて頂きましたので、
お手隙の時にでもどうぞ宜しくお願い致します。
No.2
- 回答日時:
こんにちは。
何かちょっとしたミスがありませんかね。
私の環境では動きましたよ。
$(check[i]).click ( function() {
$(".cell"+i).toggle(this.checked);
});
};
だとclass="cell0",class="cell1"とか付けないといけないので個人的にはおすすめしません。
jQueryのセレクタは柔軟に対応できるのでいろいろなアクセス方法があります。
現在のHTMLの構成と、やりたいことがわかればもうちょっとアドバイス出来ると思います。
この回答への補足
こんにちは。2度目のご回答ありがとうございます。
>class="cell0",class="cell1"とか付けないといけないので
こちらは、後ほど.eachと.addClassを使って設定しようと思っておりました。
簡単に、コードを補足します。
ネットから切り貼りしたド素人製でお恥ずかしい限りなのですが、
何卒宜しくお願い致します。
イメージは、エクセルの上の部分です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>アルファベット順のテーブルのテスト</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
<!--
var alfa = ['A', 'B','C'];
var check = ['#link0', '#link1','#link2'];
$(document).ready(function(){
function thwrite() {
var thcnt =$('th').size();
$("table#sample tr:nth-child(1)").append("<th>" + alfa[thcnt] + "</th>");
};
function thremove() { $('th:last').remove() ;}
//試したコード
//for ( var i = 0; i < check.legnth; i ++ ) {
//$(check[i]).click ( function() {
//if( this.checked ) {
//thwrite();
//} else {
//thremove()
//}
//$(".cell"+i).toggle(this.checked);
//});
//};
//繰り返し出来そうな箇所
$( check[0] ).click(function () {
if( this.checked ) {
thwrite();
} else {
thremove()
}
$(".cell0").toggle(this.checked);
});
$( check[1] ).click(function () {
if( this.checked ) {
thwrite();
} else {
thremove()
}
$(".cell1").toggle(this.checked);
});
$( check[2] ).click(function () {
if( this.checked ) {
thwrite();
} else {
thremove()
}
$(".cell2").toggle(this.checked);
});
});
// -->
</script>
<style>
<!--
table {
font-size:12px;
border:1px solid #afcbef;
border-collapse:collapse;
border-spacing:0;
}
table span {
font-size:10px;
}
th {
width:80px;
background:#d3dce9;
text-align:center;
padding:5px;
border:1px solid #afcbef;
}
td {
text-align:center;
border:1px solid #afcbef;
display:none;
}
-->
</style>
</head>
<body>
<form name="chbox">
<input type="checkbox" id="link0">
<input type="checkbox" id="link1">
<input type="checkbox" id="link2">
</form>
<table id="sample">
<tr>
</tr>
<tr>
<td class="cell0">test0</td>
<td class="cell1">test1</td>
<td class="cell2">test2</td>
</tr>
</table>
</body>
</html>
No.1
- 回答日時:
こんにちは。
対象の要素にclass="hoge"とつけてあげて
$('.hoge').click ( function() {
// 処理A
});
では駄目でしょうか。
forで書きたいなら
for ( var i = 0; i < check.legnth; i ++ ) {
$(check[i]).click ( function() {
// 処理A
});
}
になると思いますが。
>var check = ['link0', '#link1','#link2'];
は
var check = ['#link0', '#link1','#link2'];
ですよね?
この回答への補足
早速のご回答ありがとうございます。
for ( var i = 0; i < check.legnth; i ++ ) {
$(check[i]).click ( function() {
// 処理A
});
}
こちらの方向で行いたいのですが、
どうやら.clickイベントが実行されないようなんです。
あと質問とは若干異なるのですが、
$(check[i]).click ( function() {
$(".cell"+i).toggle(this.checked);
});
};
を繰り返したいと思っています。
(処理Aが微妙に違う)
>var check = ['#link0', '#link1','#link2'];
すみません、#が抜けておりました。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 正規表現について質問です。条件に合う場合はtrueを返したい 3 2022/10/06 23:02
- JavaScript 変数のスコープの問題? 3 2022/06/23 09:32
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript functionはhtmlやjsに2度使えませんか 2 2022/08/03 19:55
- Visual Basic(VBA) こんにちは。ExcelVBA初心者につき困っています。Functionで始まっている処理の中で、処理 1 2022/06/18 21:40
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- ドライブ・ストレージ USBメモリが勝手に接続解除される。 2 2022/06/30 12:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- au(KDDI) AUメールが受信できなくなった件 1 2022/08/16 10:35
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
PDFを(htmlのように)無限に縦...
-
スライドを最後の画像で止めたい
-
入力フォームの値をQRコードで...
-
RPA(PowerAutomate)の実装について
-
jQueryを使いformでsubmitした...
-
ダブルクリックと2回クリックの...
-
Googleマップで何か見つけたも...
-
VBA コンボボックスの値をスピ...
-
JQuery、セレクトボックスをル...
-
GASでスプレッドシートの一番上...
-
二つのbxsliderをレスポンシブ...
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのgetでJSPを呼び出したい
-
要素内を常に一番下を表示させたい
-
【javascript文法】 prototype...
-
ローカルでのonreadystatechang...
-
jQueryで、複数条件の絞り込み機能
-
JQueryでAjax通信をキャンセル...
-
画面移遷なしで画像アップロー...
-
jqueryでリンクを無効にしたあ...
-
jqueryについて
-
繰り返し処理のシンプルな書き方
-
ある条件の画像のみ表示を切り...
-
jQuery 並列load処理
-
アコーディオンメニューについて
-
jqueryの関数?について
-
jqueryで読み込みが終わった画...
-
jQueryでloadしたページ内でもj...
-
jqueryで特定のIDに対して
-
AJAXでのリロードに関して
-
jqueryでテキストエリア監視に...
-
ドラッグ & ドロップでのド...
おすすめ情報