使用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)   
        });




 });