aタグクリックする度にリンクとテキストを書き換えたいです。

HTML
1<body>
2<div class="button">
3            <a href="#profile" onclick="linkClick(this);"><p>プロフィール</p></a>
4        </div>
5<!-- jQueryの読み込み（CDN） -->
6        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7        <!-- main.jsの読み込み -->
8        <script src="js/main.js"></script>
9</body>

JS
1"use strict";
2function linkClick(aTag) {
3    aTag.innerHTML = "<p>コンセプト<" + "/p>"; 
4    aTag.href = "#concept";
5}

今このように書いており、１回クリックしたら切り替えるところまでは出来ました。
aタグのinnerHTMLとhrefの変更を合計４回行いたいです。
５回目に最初の<a href="#profile" onclick="linkClick(this);"><p>プロフィール</p></a>の状態に戻して
６回目から1~4回目と同じ順番で変更する、を繰り返していきたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

考え方として、切り替えたいテキストと切り替えたいURLをそれぞれ配列に用意します。
そして、クリックされる度にiに代入した数値をカウントアップしていき、それに連動した順番の値をテキストとURLに出力します。
そして、iの数値が配列の最後の順番になったらまた最初に戻る（iを0に戻す）、というのを繰り返します。

※リンクテキストは「プロフィール」「コンセプト」から推測したものです

js
1let linkText = ['<p>コンセプト</p>', '<p>ブログ</p>', '<p>問い合わせ</p>', '<p>プロフィール</p>'];
2let url = ['#concept', '#blog', '#contact', '#profile'];
3let i = 0;
4
5function linkClick(aTag) {
6  if (i >= linkText.length) {
7    i = 0;
8  }
9  aTag.innerHTML = linkText[i]; 
10  aTag.href = url[i];
11  i++;
12}

投稿2022/01/11 13:54

編集2022/01/12 04:56

lifull_shimaokk

総合スコア129

iisaniisan

2022/01/12 08:42

できました。ありがとうございます。

行動規範の内容に同意します

根本的に違いすぎますが・・・。

html&js
1<!DOCTYPE html>
2<meta charset="utf-8"><html>
3<title></title>
4<style>
5</style>
6<body>
7<p><a href="#hoge">A</a>
8<p><a href="#fuga">あ</a>
9
10
11<script>
12
13const pt = [
14  { href: "#hoge", idx: 0, text :['A', 'B', 'C', 'D', 'プロフィール']},
15  { href: "#fuga", idx: 0, text :['あ', 'い', 'う', 'え','お', 'プロフィール']},
16];
17
18document.addEventListener('click', ({target: e}) => {
19  if ('A' === e.nodeName) {
20    let [a] = pt.filter (b=> e.getAttribute ('href') === b.href);
21    if(a) {
22      a.idx = (a.idx + 1) % a.text.length;
23      e.textContent = a.text[a.idx];
24    }
25  }
26});
27
28</script>
29