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

Question

I need to change dynamically and simultaneously more than one query value in a Href attribute. I already set correctly the part in which I select the data-name of some tabs that contain the query value.

But now I don't know how to set the jquery part of the code that allows me to change the url

here you can see my code:

 $( 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> 

EDIT to be more specific:

I want that, when I click on a link (please see the ), I could collect the data-name. Then, when i have that data-name I want dynamically change the query values in the .button href attribute. As you can see, the href has two query named &soggiorno=INSERT-SOGGIORNO and &bagno=INSERT-bagno, and for those queries I want to set rispectively the data-name as values

Answer 1

You can use attr(attributeName, function) and return a new value.

This is also much simpler using the built in URL API .

---

Basic example using few data attributes and having one with different value than what is in href query string

 $('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

You have to define variables nameSoggiorno ,namaBagno and make changes for changing href code is as below

     $( 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)   
        });




 });