使用 jquery 动态更改 Href 属性中的多个查询值

Question

我需要在 Href 属性中同时动态更改多个查询值。 我已经正确设置了我选择包含查询值的某些选项卡的data-name 的部分。

但现在我不知道如何设置允许我更改 url 的代码的 jquery 部分

在这里你可以看到我的代码：

$( document ).ready(function() {
  $('.tab-soggiorno').on('click',function(valueSoggiorno){
           console.log(valueSoggiorno['currentTarget']);
            var nameSoggiorno = $(valueSoggiorno['currentTarget']).data('name');
            console.log(nameSoggiorno);
            //var url = $("link-" + allest).attr("href");
        //$("link-" + allest).attr("href", "?pavimento=" +nome); 
      });


      $('.tab-bagno').on('click',function(valueBagno){
            console.log(valueBagno['currentTarget']);
            var nameBagno = $(valueBagno['currentTarget']).data('name'); 
            console.log(nameBagno);
            //var url = $("link-" + allest).attr("href");
        //$("link-" + allest).attr("href", "?pavimento=" +nome);   
        });

        $('.button').each(function(){
                var currenthref = $(this).attr("href");
                if(currenthref.includes('&soggiorno=')){
                    var ti=currenthref.indexOf('&soggiorno=');
                    var ti2=currenthref.indexOf('&bagno=');
                    currenthref1 = currenthref.substring(0, ti);
                    currenthref2 = currenthref1.substring(ti, 100000);
   
                }
                $(this).attr("href", currenthref1 + "&soggiorno=" + nameSoggiorno + "&bagno=" + nameBagno);
            });
            

 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a data-name="Ceramica Mirage - jewels, colore 16" class="tab-bagno">1</a>
  <a data-name="Ceramica Mirage - jewels, colore 14" class="tab-bagno">2</a>
  <a data-name="Ceramica Mirage - jewels, colore 6" class="tab-bagno">3</a>
</div>
                  
                  
<div>
  <a data-name="Parquet Castiglioni - Verniciato 05" class="tab-soggiorno">4</a>
  <a data-name="Parquet Castiglioni - Verniciato Naturale" class="tab-soggiorno">5</a>
  <a data-name="Parquet Castiglioni - Verniciato 09" class="tab-soggiorno">6</a>
</div>


<a class="button" href="checkout.php?&allestimento=Silver&soggiorno=INSERT-SOGGIORNO&bagno=INSERT-BAGNO" >select</a>

编辑更具体：

我希望，当我点击一个链接（请参阅 ）时，我可以收集数据名称。然后，当我拥有该数据名称时，我想动态更改 .button href 属性中的查询值。如您所见，href 有两个名为 &soggiorno=INSERT-SOGGIORNO 和 &bagno=INSERT-bagno 的查询，对于这些查询，我想将数据名称分别设置为值

Answer 1

您可以使用attr(attributeName, function) 并返回一个新值。

使用内置的URL API 也更简单。

---

使用少量数据属性且具有与 href 查询字符串中的值不同的值的基本示例

$('a').attr('href', function() {
  const url = new URL(this.href),
    params = url.searchParams,
    data = $(this).data();

  $.each(data, function(k, v) {
    if (!params.has(k)) {
      console.log('Params missing : ', k)
      params.set(k, v)
    } else if (params.get(k) !== v) {
      console.log('params have different value for : ', k);
      params.set(k, v);
    }

  });
  console.log('New query string:', url.search);
  // return new href
  return url.href;

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-foo="1" data-bar="2" href="/somepath?foo=3">Test</a>

Answer 2

您必须定义变量 nameSoggiorno ,namaBagno 并进行更改以更改 href 代码如下

     $( document ).ready(function() {
    var nameBagno ='a';
    var nameSoggiorno = 'a';
  $('.tab-soggiorno').on('click',function(valueSoggiorno){
           console.log(valueSoggiorno['currentTarget']);
            nameSoggiorno = $(valueSoggiorno['currentTarget']).data('name');
            console.log(nameSoggiorno);

           var vars = [];

           var parts = $('.botton').attr('href').replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
               if(key == 'soggiorno')
               {
                   value = nameSoggiorno;
               }
               vars.push({key:key, value:value});

           });
    var href="checkout.php?allestimento="+vars[0].value+"&soggiorno="+vars[1].value+"&bagno="+vars[2].value+"";
    $('.botton').attr('href', href)

  });


      $('.tab-bagno').on('click',function(valueBagno){
            console.log(valueBagno['currentTarget']);
            nameBagno = $(valueBagno['currentTarget']).data('name'); 
            console.log(nameBagno);
           var vars = [];

           var parts = $('.botton').attr('href').replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
               if(key == 'bagno')
               {
                   value = nameBagno;
               }
               vars.push({key:key, value:value});

           });
    var href="checkout.php?allestimento="+vars[0].value+"&soggiorno="+vars[1].value+"&bagno="+vars[2].value+"";
    $('.botton').attr('href', href)   
        });




 });