URL変更２

締切済

質問者：maki12
質問日時：2009/10/05 00:53
回答数：3件

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>

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3

回答者： fujillin
回答日時：2009/10/05 09:45

こんにちは。

ちょっと、複雑にした応用問題といったところでしょうか。
1個のものをベースに個数を一般化するとどうなるかを考えればよろしいかと。
ご自分でどこまでできて、どの部分ができないのかを提示なさったほうが、適切な回答が得られると思いますよ。
（ご質問文では、どこが分からないのか不明ですし、ただ「作って」といのはここの主旨ではないかと。）

この回答への補足

前回の回答5の記述をそのまま使用しているので、どういう動作をしているのか解りません。
<div id="target">となっているのでidを分ければ出来るかなと思いましたが、
同じdiv内に別々に換えたい場所がありますので、その対処も解りません。
<input type="text" onmouseout="chgurl(this.value);">を２つにしても別々に認識させるのに変えられるような箇所は(this.value)かなと思いましたが、どう変えたらいいか解りません。

補足日時：2009/10/05 10:04

通報する

- 0
- 件

通報する

No.2

回答者： yuu_x
回答日時：2009/10/05 09:26

> 初期値がテキストボックスに表示されていますし

何の問題があるかよくわからんけど、どうしても表示したくないとのことなので、しょうがないから独自属性を使用。これもいやなら、適当にプログラム内に埋め込むなり好きなように。

<!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>

この回答への補足

テキストボックスに文字があると入力する際に毎回消さなくてならないので
最初から空欄のほうが便利です。

上記で試してもテキストボックスに入力したものに変わってくれませんでした。
元のURLのままでした。

補足日時：2009/10/05 10:27

通報する

- 0
- 件

通報する

この回答へのお礼

onmouseoutにすれば変わりましたが、4行目のsample8が変わず元のままでした。

通報する

お礼日時：2009/10/05 11:13

No.1

回答者： yuu_x
回答日時：2009/10/05 02:17

<!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>