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

Question

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

当我单击特定元素时（请参阅a class="tab-bagno" 和 class="tab-soggiorno"），我想检索它们的 data-name 并在 a 标记中使用该值和 class="button"。

如您所见，带有class="button" 的a 标记有两个未分配值的特定查询（&soggiorno=INSERT-SOGGIORNO 和&bagno=INSERT-BAGNO），我的目标是能够将data-name 的两个查询中带有class="button" 的a 标记。

目前，我能够正确检索 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 放在事件处理程序中。

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

最后，您需要在将查询字符串数据附加到链接之前对其进行 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() 函数。

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