Question

我以http://stackoverflow.com/a/10997390/11236

为基础

单击时，我要获取clicked元素的数据属性值并将其用作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 Controler

  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 Click处理程序

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

因此，我必须检查单击的div是否包含属性“ data-url”，如果是，则应将其用作“ customvalue”的参数

结果，网址应如下所示：

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

Answer 1

您可以通过Jquery在$(element).attr()中获取/设置属性值。找到值并在所需的地方使用。

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>

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

2 个答案: