ある要素をクリックし、そのページ自体のURLに指定のパラメータを追加させ、再読み込みさせたい

Question

ある要素をクリックし、指定のパラメータを追加させ、再読み込みさせたいです。

■ URL1
example.com/?aaa=111

上記URLが表示されており、そのページ内に

<div class="xxx"></div> という要素があります。

この要素をクリックすると
example.com/?aaa=111&bbb=222
というURLを読み込みたいです。

当然以下のようなリンクでは無理ですし
<a href="&bbb=222"></a>

JavaScriptかPHPを使用することで実現できるのではないかと思い
Webで色々と調べたのですが答えにたどり着けませんでした。
力不足で申し訳ないのですが、ご教授いただけますと大変助かります。

Answer 1

<div class="xxx"> のクリックハンドラを以下のように設定してみると、いかがでしょうか？

$('div.xxx').click(function() {
  const param = 'bbb=222';
  const { href } = window.location;
  if (!href.includes(param)) {
    const op = href.includes('?') ? '&':'?';
    window.location.href += `${op}${param}`;
  }
});

Comments

[take4]

ご教授いただきありがとうございます！
こちらのコードで試してみたのですが要素をクリックしても特に何も起こらず、ページの再読み込みも行われないようです。私の書き方がおかしいのかもしれないので、もう少し試してみますがひとまずご報告させていただきます。

[take4]

ふと頭に浮かんだコードでとりあえずいけました。
お手数おかけして申し訳ありませんでした。

Answer 2

以下のコードでいけました。

<script>
$(".xxx").on("click", function(){
var url1 = location.href ;
var url2 = url1 + "&bbb=222" ;
window.location.href = url2;
});
</script>

Comments

[jun68ykt]

これだと、一度クリックして、&bbb=2 の追加されたURLで画面が再表示された後に、再度、.xxx の div をクリックすると、さらに、&bbb=2 が追加されてしまうような気がしますがいかがでしょうか？　私の回答に書いたコードはその対策もしたつもりでした。ともあれ、解決されたようでよかったです????