使用数据属性中的值作为 url 参数

Question

作为基础，我使用：

单击时，我想获取被单击元素的数据属性值并将其用作 url 参数。我不想破坏实际行为，我只想扩展它。我现在试了几个小时，但没有结果。

HTML

<div class="button one">Click me</div>
<div class="button two" data-url="this-should-be-the-parameter">Click me</div>

JS URL 控制器

  function updateURLParameter(url, param, paramVal){
      var newAdditionalURL = "";
      var tempArray = url.split("?");
      var baseURL = tempArray[0];
      var additionalURL = tempArray[1];
      var temp = "";
      if (additionalURL) {
          tempArray = additionalURL.split("&");
          for (var i=0; i<tempArray.length; i++){
              if(tempArray[i].split('=')[0] != param){
                  newAdditionalURL += temp + tempArray[i];
                  temp = "&";
              }
          }
      }

      var rows_txt = temp + "" + param + "=" + paramVal;
      return baseURL + "?" + newAdditionalURL + rows_txt;
  }

    var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
    newURL = updateURLParameter(newURL, 'resId', 'newResId');

JS 点击处理程序

$( ".button" ).click(function() {
  window.history.replaceState('', '', updateURLParameter(window.location.href, "specificurl", "customvalue"));
});

所以，我必须检查，如果单击的 div 包含属性 "data-url"，如果是，这应该用作 "customvalue"

的参数

因此，Url 应该如下所示：

Click on ".buton.one": xyz.com/?specificurl=customvalue
Click on ".buton.two": xyz.com/?specificurl=this-should-be-the-parameter

Answer 1

您可以通过 $(element).attr() get/set Jquery 中的属性值。找到价值并在你想要的地方使用。

console.log($("#input").attr('data-attr'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="input" data-attr="my_value" type="text" />

Answer 2

在现代浏览器中，有一个更简单的内置 URL API 您现在可以使用。

在按钮单击处理程序中，使用 data() 检查数据属性是否已设置并具有值。如果是...使用 URL.searchParams.set(key, value)

$('.button').click(function(){
   var url = new URL(location.href),
      dataUrl = $(this).data('url');
   if(dataUrl){
    url.searchParams.set('someVar', dataUrl ); 
   }
    
   console.log(url.href)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button one">Click me</div>
<div class="button two" data-url="this-should-be-the-parameter">Click me</div>

使用数据属性中的值作为 url 参数

Use value from data attribute as url parameter

javascript

jquery

url-parameters