aタグの一部javascriptでの変更について

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 4,837

JimmyKing2001

score 13

こんにちは、アドレスの一部をjavascriptで変更したいですが、ググってもなかなか良い回答出なくて質問させていただきます。

<a href="http://hello.com/123/abc.html">
<a href="http://hello.com/123/cde.html">
<a href="http://hello.com/123/efg.html">
.
.
.

があるとして、
<script>
function getDir(place, n) {
return place.pathname.replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((n || 0) + 1) + "}$"), "/");}
</script>

動かないコード
<a href="javascript:document.write(getDir(window.location))"+"abc">  
//動的にパスを取得したいです

もちろんjavascriptの中に+"abc"などを入れると出来ますが、そうするといっぱいあるので置き換えは大変そうです。hrefの中で連結の方法やこの問題を簡単に解決できる方法があればご教授いただけますでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+1

<a href="javascript:window.location.href=getDir(window.location)+'abc.html'">


ってことですか?

でも、これって、

<a href="abc.html">

ってことですよね?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/17 19:47

    ご回答どうもありがとうございます。確かにそう言われるとそうです。相対パスで書けばよかったですね。帰ったら試してみます。

    キャンセル

0

getDir() の部分はぱっとは分からないのですが、
とりあえずリンクの飛び先を書き換える部分のサンプルだけ置いておきます。

function test(lnk, n) {
  // a 要素の onclick にて this を渡しているので、引数として来るのは a 要素です
  alert(lnk.tagName + "\n\n" + lnk.href);  // 書換前の確認

  // href を書き換え
  lnk.href = "http://teratail.com/" + n;

  alert(lnk.tagName + "\n\n" + lnk.href);  // 書換後の確認
}
<div>
  <a href="#" onclick="test(this, 'tour');">てすと1</a>
</div>
<div>
  <a href="#" onclick="test(this, 'tags');">てすと2</a>
</div>

こんな感じですかね?

href の頭は仮に "http://teratail.com/" にしてありますが、
ここを window.location をなんやかやして現在位置を取り出す感じになるでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/17 18:55

    ご回答いただき、どうも有難うございます。リンクの書きかえであれば確かにサンプルの方も動きます。ちょっと要望と違いますが、参考させていただきます。

    キャンセル

  • 2016/03/17 19:06

    ああごめんなさい、読み直したら、クリックした時に書き換えたいんじゃなくて
    画面表示時に確定させるので良いんですね。

    <a href="<%= rootpath %>/abc.html"> みたいな?(これは ASP.NET の例ですが)

    ルートの部分を共通で一括書き換えできるようにしたい、ということですかね。

    ええっと、私が書いたの ↑ は onclick で書き換えていますが、
    画面表示時に

    ■ 全 A 要素を取得して LOOP で回す。
    ■ 書き換えたくないリンクもあるかもしれないから、対象の A 要素にだけなにか class (CSS) を指定しておいて、それで判別する?

    みたいな感じが良いでしょうか。
    もし jQuery とかが使えるなら、使った方が簡単ですかね。
    使えないなら・・・ document.getElementsByTagName() とかですかね。

    キャンセル

  • 2016/03/17 19:35

    コメントどうもありがとうございます。すみません、私の質問が悪かったかも知れません。おっしゃる通り、phpやjQuery使って簡単にできますが、単純にそのhtml+jsでどのように実現できるか気になっています。<a href="<%= rootpath %>/abc.html"> をhtml+js版に書き換えるとどうなりますかのような感じです。

    キャンセル

0

※jQuery を使っています

function test() {
    $("a").each(function(){   // a 要素を全部まわす

        var $lnk = $(this);   // each 内で $(this) = a要素

        alert($lnk.text() + '\n\n'
              + $lnk.data("pagename") + '\n\n'
              + $lnk.prop("class"));

        if ($lnk.prop("class") != "test") {
            alert("対象ではない");
            return true;  //each 内で return true = continue
        }

        // href を設定
        var n = $lnk.data("pagename");
        $lnk.prop("href", "http://teratail.com/" + n);
    });
}
<!-- テスト的にボタンで呼んでいますが、実際は画面のロード時に呼ぶ -->
<button onclick="test()">TEST</button>

<div><a href="#" class="test" data-pagename="tour">ほげ</a></div>
<div><a href="#">ふが</a></div>
<div><a href="#" class="test" data-pagename="tags">ぴよ</a></div>

こういうことですかね。jQuery を使わない版が必要であれば明日、か誰かパス・・・
(ごめんなさい今日はもう帰ります)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/17 19:38

    たくさん書いていただきどうもありがとうございます。一日お疲れ様です。どうもありがとうございます。

    キャンセル

0

解決したみたいで良かったです。
相対パスで良いのか!そうか、そうですよね・・・


完全に蛇足ですが、

「javascriptでhrefを書き換えるのではなく、画面遷移自体をjavascriptで行う」

というの手もあるなと思ったので 一応残しておきます。

もし「ルート部分が他サイト」とかの場合は、相対パスが使えないのでこっちかなとか・・・
(そういうケースがあるかと聞かれると疑問ですが)

※相対パスが使えるケースでは、相対パスの方が良いですね。
※「JavaScriptが切れてたらリンクが飛べない」よりは
※「JavaScriptが切れててもリンクは飛べる」方が断然良いですし。

function goPage(pagename) {
    location.href = "http://teratail.com/" + pagename;
}
<div>
  <a href="javascript:void(0)" onclick="goPage('tour');">てすと1</a>
</div>
<div>
  <a href="javascript:void(0)" onclick="goPage('tags');">てすと2</a>
</div>


まあでも、上でも書きましたが
「JavaScriptを切っているとリンクが飛べない」というのはあまり良い作りではないので、
よほど数が多くて、頻繁に変わる、というのでもない限りは
js は使わずにベタっと href を書いた方が良いですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/18 14:51

    こんにちは。補足のコメントどうもありがとうございます。私が初心者でこんなにご丁寧に教えていただけると感動です。今回は特別な作業の対応なので、普通リンクはphpで飛ばしたり、.htaccessでさばいたりします。上記のコードも勉強になります。また引き続きどうぞよろしくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る