динамическое изменение более одного значения запроса в атрибуте Href с помощью jquery - PullRequest
Новая
       16

динамическое изменение более одного значения запроса в атрибуте Href с помощью jquery

0 голосов
/ 03 апреля 2019

Мне нужно динамически и одновременно изменять более одного значения запроса в атрибуте Href. Я уже правильно установил часть, в которой я выбираю data-name некоторых вкладок, которые содержат значение запроса.

Но теперь я не знаю, как установить часть кода jquery, которая позволяет мне изменять URL

здесь вы можете увидеть мой код: 

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

РЕДАКТИРОВАТЬ, чтобы быть более конкретным:

Я хочу, чтобы при нажатии на ссылку (см.) Я мог собрать имя-данные. Затем, когда у меня есть это data-name, я хочу динамически изменить значения запроса в атрибуте .button href. Как вы можете видеть, у href есть два запроса с именами & soggiorno = INSERT-SOGGIORNO и & bagno = INSERT-bagno, и для этих запросов я хочу установить в качестве значения data-name в качестве значений

Ответы [ 2 ]

0 голосов
/ 03 апреля 2019

Вы должны определить переменные 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)   
        });




 });
0 голосов
/ 03 апреля 2019

Вы можете использовать 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>
...