人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの質問です
http://jsfiddle.net/cw47p4um/6/
こちらのページなのですが 回答の行にマーカーを引く仕組みにしています
なぜか一問目のjavascriptが上手く動かず 問題文までマーカーが引かれてしまいます
なぜでしょうか?

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

質問者から

申し訳ありません アドレスを貼り間違えました
こちらです
http://jsfiddle.net/cw47p4um/12/


1 ● きゃづみぃ
●250ポイント

最初のようになっていないからでしょう。

少し 変えてみました。

<body><table>
 
 <td>14<input type="checkbox" class="hikakubox"> </td>
 
 <td>48</td>
 <td>赤いのはどれか<BR><input type="checkbox">a りんご<BR><input type="checkbox">b みかん<BR><input type="checkbox">c たいや<BR><input type="checkbox">d なし<BR><input type="checkbox">e 黒</td><td>a</td><td></td><td></td><td></td></tr><tr><td>14<input type="checkbox" class="hikakubox"></td><td>49</td><td>黄色はどれか<BR><input type="checkbox">a ばなな<BR><input type="checkbox">b みかん<BR><input type="checkbox">c 銀色<BR><input type="checkbox">d みかん<BR><input type="checkbox">e 黒</td><td></td><td></td><td>a</td><td></td></tr>
</table></body>

二つ目のに 合わせる場合、タグを調整しないとダメでしょうね。


takaniiさんのコメント
文字の改行の問題でしょうか?

2 ● a-kuma3
●250ポイント ベストアンサー

一連の質問を考慮して、ちょっと書き直しました。
http://jsfiddle.net/b5cgdm3d/1/

考慮したのは、こんなところです。

window.onload = function() {
 mark_answer();
}

function mark_answer() {
 var trs = document.getElementsByTagName("tr");
 for (var i = 0 ; i < trs.length ; ++i) {
 var ans = trs[i].children.item(5);
 re_ans = new RegExp("^[" + ans.innerHTML + "]");
 var ele_q = trs[i].children.item(2);
 walk_and_mark_answer(ele_q, re_ans);
 }
}

function walk_and_mark_answer(node, re) {
 var ele = node.firstChild;
 if (! ele) return;
 do {
 if (ele.nodeType == 3) {
 if (re_ans.exec(ele.nodeValue)) {
 var wrap = document.createElement("span")
 wrap.className = "answer_marker"; // ★目印
 ele.parentNode.insertBefore(wrap, ele);
 wrap.appendChild(ele);
 ele = wrap;
 }
 } else if (ele.nodeType == 1) {
 walk_and_mark_answer(ele, re);
 }
 } while (ele = ele.nextSibling);
}

ボタンを押して回答に色を付けたい場合には、関数 mark_answer() を、ボタンの click で呼び出してください。


因みに、http://jsfiddle.net/cw47p4um/12/ が、期待通りに動かなかった理由。

 var ans = trs[i].children.item(3);

これは、回答が TABLE の 4列目にあることを想定しています。
列が増えたので、回答を見失っていたのが、回答の色を付けられなかった、一番の理由です。

問題文に色が付いてしまっていたのは、色を付けるための目印にしていた変数のクリアができていなかったためです。
この回答で書き換えたコードでは、LABEL で括られた箇所も見るようにした過程で、色を付けるための目印にしていた変数も使わないように書き換えました。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ