このコードは問題ないでしょうか。

締切済

質問者：kiseki777
質問日時：2012/05/08 02:19
回答数：16件

javascriptを学んでいます。
練習のために下記のコードを自分なりに試行錯誤して作りました。
ちゃんと動くようになりましたが、自己流で修正を繰り返したので正しくない部分があると思います。
また、imgタグのそれぞれにidを付けて区別しています。
idを付けずにやる方が効率的で良いと思うのですが、実現することができず、
仕方なくidを全て付けて妥協しました。
改善点をご指摘して頂けると嬉しいです。ご教示をお願いいたします。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画像の切替とおすすめの組合せ</title>
<style type="text/css">
#kkkkkk {
width: 300px;
position: relative;
}
#kkkkkk img {
position: absolute;
top:0;
left: 0;
}
</style>
<script type="text/javascript">
function aaa(evt){
var t = evt.target || evt.srcElement;
var tid = t.id;
var tag = t.parentNode.getElementsByTagName("img");
var kkkkkk = document.getElementById('kkkkkk');

if(t.nodeName != "IMG") return;

for(i=0; node=kkkkkk.children[i++];){
if(node.tagName != "IMG") continue;
if(node.id == tid.replace(/_|[0-4]/g,"")){
node.src = t.id+".jpg";
}
}
}

function rrrrr(a,b,c){
var ta = document.getElementById('testA');
var tb = document.getElementById('testB');
var tc = document.getElementById('testC');
ta.src = "testA_"+a+".jpg";
tb.src = "testB_"+b+".jpg";
tc.src = "testC_"+c+".jpg";
}

</script>
</head>
<body>
<div>
<img id="testA_0" src="testA_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_1" src="testA_1.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_2" src="testA_2.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_3" src="testA_3.jpg" width="30" alt="" onclick="aaa(event);" />
<br />
<img id="testB_0" src="testB_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testB_1" src="testB_1.jpg" width="30" alt="" onclick="aaa(event);" />
<br />
<img id="testC_0" src="testC_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testC_1" src="testC_1.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testC_2" src="testC_2.jpg" width="30" alt="" onclick="aaa(event);" />
</div>

<form>
<input type="button" value="おすすめ画像の組み合わせ　その１" onclick="rrrrr(0,0,2)" /><br />
<input type="button" value="おすすめ画像の組み合わせ　その２" onclick="rrrrr(3,1,0)" /><br />
<input type="button" value="おすすめ画像の組み合わせ　その３" onclick="rrrrr(2,1,1)" /><br />
</form>

<div id="kkkkkk">
<img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="" />
<img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="" />
<img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="" />
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (16件中11～16件)

最新から表示
回答順に表示

No.6

回答者： babu_baboo
回答日時：2012/05/10 02:46

あ～やっちまったな～

>rrrrr ([[2,0,1], [3,1,2],[0,0,1]][Number(t.name)||0])

rrrrr.apply (null, [[2,0,1], [3,1,2],[0,0,1]][Number(t.name)||0]);

ごめんなさい。訂正でした。

- 0
- 件

通報する

この回答へのお礼

直した後のスクリプトをのせるのを忘れていました。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>画像の切替とおすすめの組合せ</title>
<style type="text/css">
#kkkkkk {
width: 300px;
position: relative;
}
#kkkkkk img {
position: absolute;
top:0;
left: 0;
}
</style>
</head>
<body>
<div id="ggggg">
<img id="testA_0" name="testA_0" src="testA_0.jpg" width="30" alt="A画像0" />
<img id="testA_1" name="testA_1" src="testA_1.jpg" width="30" alt="A画像1" />
<img id="testA_2" name="testA_2" src="testA_2.jpg" width="30" alt="A画像2" />
<img id="testA_3" name="testA_3" src="testA_3.jpg" width="30" alt="A画像3" />
<br />
<img id="testB_0" name="testB_0" src="testB_0.jpg" width="30" alt="B画像0" />
<img id="testB_1" name="testB_1" src="testB_1.jpg" width="30" alt="B画像1" />
<br />
<img id="testC_0" name="testC_0" src="testC_0.jpg" width="30" alt="C画像0" />
<img id="testC_1" name="testC_1" src="testC_1.jpg" width="30" alt="C画像1" />
<img id="testC_2" name="testC_2" src="testC_2.jpg" width="30" alt="C画像2" />
</div>

<form action="GET" name="fff">
<input type="button" name="1" value="おすすめ画像の組み合わせ　その１" /><br />
<input type="button" name="2" value="おすすめ画像の組み合わせ　その２" /><br />
<input type="button" name="3" value="おすすめ画像の組み合わせ　その３" /><br />
</form>

<div id="kkkkkk">
<img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="切替後画像A" />
<img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="切替後画像B" />
<img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="切替後画像C" />
</div>
<script type="text/javascript">
var ggg = document.getElementById('ggggg');
var frm = document.fff;
if (document.addEventListener){
ggg.addEventListener('click', aaa, false);
frm.addEventListener('click', bbb, false);
} else if (document.attachEvent){
ggg.attachEvent('onclick', aaa);
frm.attachEvent('onclick', bbb);
}

function aaa(evt){
var t = evt.target || evt.srcElement;
if(t.nodeName != "IMG") return;
var rst = /^(test[A-C])_(\d)$/.exec (t.id);
var kkkkkk = document.getElementById('kkkkkk');
var i = 0, c = kkkkkk.childNodes, node;
while (node = c[i++]) {
if(node.tagName != "IMG") continue;
if (node.id == rst.slice(1,2)) {
node.src = t.id+".jpg";
}
}
}

function bbb(evt) {
var t = evt.target || evt.srcElement;
switch(t.name){
case "1":
rrrrr(2,0,1);
break;
case "2":
rrrrr(3,1,2);
break;
case "3":
rrrrr(0,0,1);
break;
default:
return;
}
}

function rrrrr(a,b,c){
var A = [
document.getElementById ('testA'),
document.getElementById ('testB'),
document.getElementById ('testC')
];
for(var i = 0, I = arguments.length; i < I; i++){
A[i].src = A[i].id + '_' + arguments[i] + '.jpg';
}
}
</script>
</body>
</html>

通報する

お礼日時：2012/05/11 19:08

No.5

回答者： babu_baboo
回答日時：2012/05/10 02:32

いつもながら追記

>画面上のどこをクリックしても実行してしまう
まさかとは思うけど、今時のPCが処理できないほど高速に連打できるとでも？
数ステップでスルーできるんだし・・・
onclick をそこいらじゅうに、付けまくっているよりコードよりは・・・

- 0
- 件

通報する

No.4

回答者： babu_baboo
回答日時：2012/05/10 02:18

一寸、今日はじっくり見る余裕がありません。

>kkkkkkが存在しないといったエラーが出てしまいます。必ず読まれているはず
読まれているはずなら、エラーにならない訳で・・・

スクリプトが実行されている時にはまだ、head の中であり、body は読み込まれていませんよ。
なので、私はいつも </body> の直前にスクリプトを書いています。

document にイベントを取り付けるのは、 head の中でも　ok ですよね。
body を読み込まなくたって document は、存在するであろうから・・・

--
node.ownerDocument
--
switch(t.name){
これは文字列

case 1:
これは数値。勝手に変換してくれるかもしれないけど意識してね。よくやる。指摘される（打たれる＆凹む）
rrrrr ([[2,0,1], [3,1,2],[0,0,1]][Number(t.name)||0]); // こんなことはしないようにね。^^;
--
関数 aaa のなかで、変更すべき id を取得できているのに、なぜループする！？
--

jpeg って、重ねて表示できたっけ？
実は、xhtml ってよく知らない。
だからNS付きを調べてね。
--

var A = [
　document.getElementById ('testA'),
　document.getElementById ('testB'),
　document.getElementById ('testC')
];

function rrrrr () {
　for (var i = 0, I = arguments.length; i < I; i++)
　　A[i].src = A[i].id + '_' + arguments[i] + '.jpg';
}
// 画像がキャッシュに納まるならそれはそれで

--
もう１００ポイントくらい・・・

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2012/05/09 02:04

追記

> htmlの部分がすっきり

addEventListener に指定する関数を、いきなり aaaa にするのではなく、間に適当な関数を置きます。
その関数で、img 要素なのか input 要素なのかを判断して aaaa もしくは rrrrr を呼び出すようにするのはどうですか？
input#button 要素にも id をふって置けば、rrrrr の引数も・・・
必要とあらば、その関数の中で evt.type を分岐点とすれば、museover だとか mouseout も１つの関数で済ませられます。
それを、「ハンドラー」と呼ぶか「リスナー」と呼ぶかは何気に迷いますが。

> style="z-index:2;"
これはスタイルシート行きでしょう。ここにも id がついているのですから。

- 0
- 件

通報する

この回答へのお礼

再度の指摘ありがとうございます。とても参考になります。
var　kkkkkkを最初に移動していますが、これは画面上のどこをクリックしても実行してしまうのが何か影響がありそうで、特定の場所をクリックしない限り実行されないようにしたくてこのようにしました。しかし、kkkkkkが存在しないといったエラーが出てしまいます。必ず読まれているはずなので、エラーになる原因が分かりません。

HTMLの部分を直しました。スタイルシート行きの要素は実践で行動に移します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>画像の切替とおすすめの組合せ</title>
<style type="text/css">
#kkkkkk {
width: 300px;
position: relative;
}
#kkkkkk img {
position: absolute;
top:0;
left: 0;
}
</style>
<script type="text/javascript">
var kkkkkk = document.getElementById('kkkkkk');
var tuikaID = document.getElementById('tuikaID');
if (document.addEventListener){
tuikaID.addEventListener('click', bbb, false);
kkkkkk.addEventListener('click', bbb, false);
} else if (document.attachEvent){
tuikaID.addEventListener('click', bbb, false);
kkkkkk.attachEvent('onclick', bbb);
}

function bbb(evt) {
var t = evt.target || evt.srcElement;
var testID1 = /^(test[A-C])_(\d)$/.test(t.id);
var testID2 = /^test[A-C]$/.test(t.id);
alert(testID1);
if(t.nodeName == "IMG" && testID1) {
aaa(evt);
}else if(t.nodeName == "INPUT" && testID2){
switch(t.name){
case 1:
rrrrr(2,0,1);
break;
case 2:
rrrrr(3,1,2);
break;
case 3:
rrrrr(0,0,1);
break;
}
}else{
return;
}
}

function aaa(evt){
var t = evt.target || evt.srcElement;
//var kkkkkk = document.getElementById('kkkkkk');←最初に移動
var rst = /^(test[A-C])_(\d)$/.exec (t.id);
var i = 0, c = kkkkkk.childNodes, node;
while (node = c[i++]) {
if(node.tagName != "IMG") continue;
if (node.id == rst.slice(1,2)) {
node.src = t.id+".jpg";
}
}
}

function rrrrr(a,b,c){
var ta = document.getElementById('testA');
var tb = document.getElementById('testB');
var tc = document.getElementById('testC');
ta.src = "testA_"+a+".jpg";
tb.src = "testB_"+b+".jpg";
tc.src = "testC_"+c+".jpg";
}

</script>
</head>
<body>
<div id="tuikaID">
<img id="testA_0" name="testA_0" src="testA_0.jpg" width="30" alt="A画像0" />
<img id="testA_1" name="testA_1" src="testA_1.jpg" width="30" alt="A画像1" />
<img id="testA_2" name="testA_2" src="testA_2.jpg" width="30" alt="A画像2" />
<img id="testA_3" name="testA_3" src="testA_3.jpg" width="30" alt="A画像3" />
<br />
<img id="testB_0" name="testB_0" src="testB_0.jpg" width="30" alt="B画像0" />
<img id="testB_1" name="testB_1" src="testB_1.jpg" width="30" alt="B画像1" />
<br />
<img id="testC_0" name="testC_0" src="testC_0.jpg" width="30" alt="C画像0" />
<img id="testC_1" name="testC_1" src="testC_1.jpg" width="30" alt="C画像1" />
<img id="testC_2" name="testC_2" src="testC_2.jpg" width="30" alt="C画像2" />
</div>

<form action="GET">
<input type="button" name="1" value="おすすめ画像の組み合わせ　その１" /><br />
<input type="button" name="2" value="おすすめ画像の組み合わせ　その２" /><br />
<input type="button" name="3" value="おすすめ画像の組み合わせ　その３" /><br />
</form>

<div id="kkkkkk">
<img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="切替後画像A" />
<img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="切替後画像B" />
<img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="切替後画像C" />
</div>
</body>
</html>

ちなみに、
/^(test[A-C])_(\d)$/.exec (t.id)
/に囲まれた部分が正規表現
()に囲まれた部分はグループを表し、
^は先頭にマッチ、$は最後がマッチを意味し、
^(A)_(B)$はAグループから始まり、_が間に入り、Bグループで終わる文字。

exec(xxx)はxxxという文字が正規表現文字列に含まれるかを調べ、
返り値は配列に。
[0] : マッチした文字列・・・testA_0とか
[1] : 1番目のグループ部分(マッチ結果)・・・testA
[2] : 2番目のグループ部分(マッチ結果)・・・0

sliceは配列や文字列を抜き取るメソッド
上記のexecの返り値.slice(1)は、testA,0になる。
slice(1,2)と1個ズレでやるとtestAになる。
ですね。勉強になります。ありがとうございます。

通報する

お礼日時：2012/05/10 01:10

No.2

回答者： babu_baboo
回答日時：2012/05/09 01:03

ちょっと勘違いをしていましたね。

これが次のヒントになるかな？
文法チェッカーにかけました？
form 要素には action 属性は必須とか・・・

function aaa(evt){
　var t = evt.target || evt.srcElement;
　var rst;

　if (rst = /^(test[A-C])_(\d)$/.exec (t.id)) {
　　alert (rst.slice(1));
　}
}

- 0
- 件

通報する

No.1

回答者： babu_baboo
回答日時：2012/05/08 04:58

こんにちは。

いきなり＆ところで、これは是非とも XHTML でなければならないのでしょうか？
まずは、基本 http://openlab.ring.gr.jp/k16/htmllint/htmllint. … でチェック。

カテゴリが Javascript なので本題はプログラムコードですよね。
他の回答で「ファイルを１つにまとめるべき」と書いておきながら、ここでは分けるべきとついでに愚申いたします。

関数 aaa の呼び出し元が、onclick からですが、document から addEventListener などで呼び出すようにしてはどうですか？
その関数の中で使われている document は、変数 t から辿ってみては？
ちょっと getElementsByTagNameNS とかを調べるとよいかも。

変数 i と node が、var を付けていない為、グローバル変数です。

＞ for(i=0; node=kkkkkk.children[i++];){
ループの中で毎回 children を呼び出すくらいなら for の手前で
var i = 0, c = document.getElementById('kkkkkk').childNodes, node;
while (node = c[i++]) {
だとか・・・

あっ！ children ?

この正規表現も微妙。
＞ if(node.id == tid.replace(/_|[0-4]/g,"")){
試していませんが、
/test[A-C]_\d\.jpg$/.test (node.id)

これって見せたいものが重なって表示されません？
隠すためなら node.style.display を弄るとか？

ｄｉｖ要素の中に、img 要素がただ並んでいるのはどうかなぁ？
文法は間違ってないのだけれど・・・

>idを付けずにやる方が効率的
ある方に「極端な話、全部に id をつければ・・・」と、おっしゃっていたのを思い出しました。
貴方の方法が効率的に見える、今日この頃。

（夜も明けた。）

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
指摘して頂いたことを取り入れてみました。
addEventListenerを使ったことでhtmlの部分がすっきりしました。
addEventListenerは、aaa(event)とできないのでクリック先を特定できないと思ったのですが、aaaとしても自動的にaaa(event)の形として機能するのですね。

>ループの中で毎回 children を呼び出すくらいなら for の手前で
childrenは読みだすたびに負荷が大きくかかるからでしょうか。

>/test[A-C]_\d\.jpg$/.test (node.id)
下記のようにためしてみたのですが、機能しませんでした。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画像の切替とおすすめの組合せ</title>
<style type="text/css">
#kkkkkk {
width: 300px;
position: relative;
}
#kkkkkk img {
position: absolute;
top:0;
left: 0;
}
</style>
<script type="text/javascript">
if (document.addEventListener){
document.addEventListener('click', aaa, false);
} else if (document.attachEvent){
document.attachEvent('onclick', aaa);
}

function aaa(evt){
var t = evt.target || evt.srcElement;
var tid = t.id;
var tag = t.parentNode.getElementsByTagName("img");
var kkkkkk = document.getElementById('kkkkkk');

if(t.nodeName != "IMG") return;

var i = 0, c = kkkkkk.childNodes, node;
while (node = c[i++]) {
if(node.tagName != "IMG") continue;
//if(/test[A-C]_\d\.jpg$/.test(node.id)){
if(node.id == tid.replace(/_|[0-4]/g,"")){
node.src = t.id+".jpg";
}
}
}

function rrrrr(a,b,c){
var ta = document.getElementById('testA');
var tb = document.getElementById('testB');
var tc = document.getElementById('testC');
ta.src = "testA_"+a+".jpg";
tb.src = "testB_"+b+".jpg";
tc.src = "testC_"+c+".jpg";
}

</script>
</head>
<body>
<div>
<img id="testA_0" src="testA_0.jpg" width="30" alt="" />
<img id="testA_1" src="testA_1.jpg" width="30" alt="" />
<img id="testA_2" src="testA_2.jpg" width="30" alt="" />
<img id="testA_3" src="testA_3.jpg" width="30" alt="" />
<br />
<img id="testB_0" src="testB_0.jpg" width="30" alt="" />
<img id="testB_1" src="testB_1.jpg" width="30" alt="" />
<br />
<img id="testC_0" src="testC_0.jpg" width="30" alt="" />
<img id="testC_1" src="testC_1.jpg" width="30" alt="" />
<img id="testC_2" src="testC_2.jpg" width="30" alt="" />
</div>

<form>
<input type="button" value="おすすめ画像の組み合わせ　その１" onclick="rrrrr(0,0,2)" /><br />
<input type="button" value="おすすめ画像の組み合わせ　その２" onclick="rrrrr(3,1,0)" /><br />
<input type="button" value="おすすめ画像の組み合わせ　その３" onclick="rrrrr(2,1,1)" /><br />
</form>

<div id="kkkkkk">
<img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="" />
<img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="" />
<img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="" />
</div>
</body>
</html>