单击特定元素后，动态更改Href属性中的一些查询值。使用Jquery

Question

我需要动态地同时更改Href属性中的多个查询值（请参阅带有a的class="button"标记）。

当我点击特定元素时（请参阅a class="tab-bagno"和class="tab-soggiorno"）我想要检索他们的data-name并使用a在class="button"标签内使用该值。

正如你所看到的，带有a的class="button"标签有两个具有非赋值的特定查询（&soggiorno=INSERT-SOGGIORNO和&bagno=INSERT-BAGNO），我的目标是能够将data-name标签的a与class="button"放在两个查询中。

现在，我能够正确检索data-name值，但我无法动态插入href。

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

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


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



        $('.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=" + nameSoggiorno1 + "&bagno=" + nameBagno1);
                })
            });

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

当我把这个代码放在网上时，href返回这个：checkout.php?tipo=43&stile=Elegance&allestimento=Gold&soggiorno=[object Object]&bagno=[object Object]"

谢谢您的帮助。

Answer 1

你的代码中有很多错误......

nameSoggiorno1和nameBagno1是从点击事件的绑定返回的jQuery对象...这就是为什么你看到正在使用的[object object]文本。

我认为你的意思是使用nameSoggiorno和nameBagno变量......但是你把它们作为var放在事件处理程序中。

您还在页面加载时在href上设置.button属性，这意味着nameSoggiorno和nameBagno无论如何都不会准备好......因此您需要在选择时针对链接设置href。

最后，您需要在将查询字符串数据附加到链接之前对其进行url编码。

尝试以下操作，我将var移动到事件处理程序之外，并相应地更改了href属性赋值。我也删除了nameSoggiorno1和nameBagno1作业，因为它们在这种情况下毫无意义。

$(function(){
  var nameSoggiorno = encodeURIComponent($(".tab-soggiorno-default").data("name"));
  var nameBagno = encodeURIComponent($(".tab-bagno-default").data("name"));
  buildUrl();
        
  $('.tab-soggiorno').on('click',function(e){
    nameSoggiorno = $(this).data('name') 
    nameSoggiorno = encodeURIComponent(nameSoggiorno);
    console.log(nameSoggiorno);
    buildUrl();
  });

  $('.tab-bagno').on('click',function(e){
    nameBagno = $(this).data('name'); 
    nameBagno = encodeURIComponent(nameBagno);
    console.log(nameBagno);  
    buildUrl();
  });

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

<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 tab-bagno-default">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 tab-soggiorno-default">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>

---

更新

响应OP的注释，您可以通过向特定项添加新类来默认初始值，并使用它来设置值。记得之后调用buildUrl()函数。

我已更新上面的代码以反映这一点。