JavaScript: 特定のボタンをクリックされた場合のみ読み込み後にページをリロードさせたい

あるAjax処理の関係で、特定のボタンをクリックした場合のみに自動的にページを再読み込み（リロード）させたいと考えております。

HTML
1<a href="#" class="hoge_a">A ボタン</a>
2<a href="#" class="hoge_b">B ボタン</a>
3<a href="#" class="hoge_c">C ボタン</a>
4<a href="#" class="hoge_d">D ボタン</a>
5<a href="#" class="hoge_e">E ボタン</a>

やりたい事

AボタンとBボタンをクリックした場合はページを自動的にリロード。その他のaタグはスルー。
クラス指定で特定のボタンのみクリックされた際にページを自動的に再読み込みさせる事は可能でしょうか？

どなたかご教授頂ければ幸いです。

追記

質問内容が不透明となっておりました。大変失礼致しました。

希望動作としては下記の通りです。
・「A ボタン」と「B ボタン」
リンク先を読み込んだ後にリロード処理を実行

・その他のボタン
通常のaタグ処理

kei344

2019/03/08 03:34

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

kszk311

2019/03/08 03:36

とりあえず、「fref」→「href」それと、実際にやってみて、問題点を質問してください。可否だけで良いのですか？

MATRIX

2019/03/08 03:38

「fref」失礼しました。質問で書いた物に誤字がありました。

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

回答2件

event.preventDefault()とlocation.reload()でできます。
詳しくは検索すると山ほどでてくるので、検索してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <a href="https://example.com" class="hoge_a">A ボタン</a>
    <a href="https://example.com" class="hoge_b">B ボタン</a>
    <a href="https://example.com" class="hoge_c">C ボタン</a>
    <a href="https://example.com" class="hoge_d">D ボタン</a>
    <a href="https://example.com" class="hoge_e">E ボタン</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <script>
        $(".hoge_a, .hoge_b").on("click", (event) => {
            event.preventDefault(); // リンク先に飛ばないようにする
            location.reload(); // リロード
        })
    </script>
</body>
</html>

投稿2019/03/08 03:52

redshoga

総合スコア196

classで場合分けしてもいいですがカスタムデータで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  [].forEach.call(document.querySelectorAll('[data-reload]'),function(x){
4    x.addEventListener('click',function(e){
5      e.preventDefault();
6      if(x.dataset["reload"]=="on"){
7        location.reload();
8      }
9    });
10  });
11});
12</script>
13<a href="#" data-reload="on" >A ボタン</a>
14<a href="#" data-reload="on" >B ボタン</a>
15<a href="#" data-reload="off">C ボタン</a>
16<a href="#" data-reload="off">D ボタン</a>
17<a href="#" data-reload="off">E ボタン</a>