- 締切済み
URL変更２
http://okwave.jp/qa5330543.html 上記の回答5で希望する事はできたのですが、同じページ内で 違う箇所のURLを別々に変えたいです。 X,Yのテキストボックスに入力されたものに、それぞれの初期値の 部分だけ変更させるにはどうしたら良いでしょうか？ X [ ] 初期値sample8 Y [ ] 初期値test5 <a href="http://sample8.jp/fol/etc_a.html">a</A> <a href="http://test5.jp/fol/etc_b.html">b</A> <a href="http://sample8.jp/fol/etc_c.html">c</A> <a href="http://test5.jp/fol/sample8_d.html">d</A>
- maki12
- お礼率44% (49/110)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 ちょっと、複雑にした応用問題といったところでしょうか。 1個のものをベースに個数を一般化するとどうなるかを考えればよろしいかと。 ご自分でどこまでできて、どの部分ができないのかを提示なさったほうが、適切な回答が得られると思いますよ。 （ご質問文では、どこが分からないのか不明ですし、ただ「作って」といのはここの主旨ではないかと。）
- yuu_x
- ベストアンサー率52% (106/202)
> 初期値がテキストボックスに表示されていますし 何の問題があるかよくわからんけど、どうしても表示したくないとのことなので、しょうがないから独自属性を使用。これもいやなら、適当にプログラム内に埋め込むなり好きなように。 <!doctype html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript"> //@cc_on function escapeReg( str ) { return str.replace (/([.?*+\-^$\\|!=\(\)\[\]{}])/g, '\\$1'); } function changehost( input ) { var as = document.getElementById('target').getElementsByTagName( 'A' ); var i, L = as.length; var pattern = new RegExp( '^http:\/\/' + escapeReg( input.getAttribute( 'data-targethost' ) ) ); for ( i=0; i<L; i++ ) { as[ i ].href = as[ i ].href.replace( pattern, 'http://'+input.value ); input.setAttribute( 'data-targethost', input.value ); } } </script> </head> <body> <form action="#"> <p> <input type="text" value="" data-targethost="sample8" onchange="changehost(this);"> <input type="text" value="" data-targethost="test5" onchange="changehost(this);"> </p> </form> <div id="target"> <a href="http://sample8.jp/fol/etc_a.html">a</a> <a href="http://test5.jp/fol/etc_b.html">b</a> <a href="http://sample8.jp/fol/etc_c.html">c</a> <a href="http://test5.jp/fol/sample8_d.html">d</a> </div> </body> </html>
お礼
onmouseoutにすれば変わりましたが、4行目のsample8が変わず元のままでした。
補足
テキストボックスに文字があると入力する際に毎回消さなくてならないので 最初から空欄のほうが便利です。 上記で試してもテキストボックスに入力したものに変わってくれませんでした。 元のURLのままでした。
- yuu_x
- ベストアンサー率52% (106/202)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript"> //@cc_on document./*@if(1) attachEvent('on'+ @else@*/ addEventListener( /*@end@*/ 'click', function( evt ){ var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/; if ( target.tagName == 'A' ) { var m = /http:\/\/([^.]*)/.exec( target.href ); var host = m[ 1 ]; var change_list = document.getElementById( 'CHANGE_LIST' ); var eles = change_list.elements; var i, L = change_list.length; for ( i=0; i < L; i ++ ) { if ( eles[ i ].defaultValue == host ) { location.href = target.href.replace( host, eles[ i ].value ); evt./*@if(1) returnValue = false; @else@*/ preventDefault(); /*@end@*/ } } } }, false ); </script> </head> <body> <form action="#" id="CHANGE_LIST"> <p> <input type="text" value="sample8"> <input type="text" value="test5"> </p> </form> <div> <a href="http://sample8.jp/fol/etc_a.html">a</a> <a href="http://test5.jp/fol/etc_b.html">b</a> <a href="http://sample8.jp/fol/etc_c.html">c</a> <a href="http://test5.jp/fol/sample8_d.html">d</a> </div> </body> </html> </body> </html>
補足
初期値がテキストボックスに表示されていますし、全く変更されませんでした。 http://okwave.jp/qa5330543.htmlの回答5のようにしたいです。
補足
前回の回答5の記述をそのまま使用しているので、どういう動作をしているのか解りません。 <div id="target">となっているのでidを分ければ出来るかなと思いましたが、 同じdiv内に別々に換えたい場所がありますので、その対処も解りません。 <input type="text" onmouseout="chgurl(this.value);">を２つにしても別々に認識させるのに変えられるような箇所は(this.value)かなと思いましたが、どう変えたらいいか解りません。