使用jquery

时间:2019-04-03 14:37:45

标签: javascript jquery html url href

我需要同时动态地更改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的查询,对于这些查询,我想分别将数据名称设置为值

2 个答案:

答案 0 :(得分:0)

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

使用内置的URL API,这也要简单得多。


使用几个数据属性,但其值与href查询字符串中的值不同的基本示例

filepath = 'C:\Users\user1\Folder\ImageFolder\'
$('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;

})

答案 1 :(得分:0)

您必须定义变量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)   
        });




 });