href要素の変数を追加して削除しますか？

Question

私はdata-attributes 2つの異なるページの2つのボックスがあります。 Aをクリックすると、hrefはindex.htmlからindex.html/aに変更され、Bをクリックすると、/aが削除され、/bが追加されます。

私は変数を変更できましたが、別のボックスをクリックしたときは変更できませんでした。だから私はindex.html/a/bを得る。私はそれが2つのボックスの間で切り替えるべきだと思います。

HTML

<div class="box" data-id="a"></div> 

<div class="box" data-id="b"></div> 

<a class="link" href="index.html>Click Me</a> 

JS

$('.box').on('click', function() { 

    var box_id = $(this).data('id'); 

    if($(this).data('id') === box_id) { 
     $('.link').attr('href', function() { 
      return.href + '?' + box_id; 
     }); 
    } 
}); 

Answer 1

以下のリンクから現在のhrefを取得し、/aまたは/bのいずれかを削除すると、クリックしたボックスのIDを追加します。常に

（私はスニペットでそれらが表示されるようにボックスにスタイルを追加しました）

var link = $('a'); 
 

 
$('.box').on('click', function() { 
 
    var id = $(this).attr('data-id'); 
 
    var newHref = link.attr('href').replace(/\/(a|b)/, '') + '/' + id; 
 
    link.attr('href', newHref); 
 
    $('#result').text(newHref); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" data-id="a" style="width:100px;height:100px;background:red"></div> 
 

 
<div class="box" data-id="b" style="width:100px;height:100px;background:blue"></div> 
 

 
<a class="link" href="index.html">Click Me</a> 
 
         
 
<div id="result"></div>