Как добавить / обновить Params для HREF атрибута с помощью JQuery?

голоса
2

У меня есть страница, которая имеет элемент якорной:

<a id=courses href=/courses>Courses</a>

И я хочу , чтобы добавить или обновить некоторые Params к href, например:

  • Добавить countryParams:<a id=courses href=/courses?country=US>Courses</a>

  • Обновите countryпараметры из USк UK:<a id=courses href=/courses?country=UK>Courses</a>

Какой самый лучший способ сделать это с помощью JavaScript или JQuery?

Задан 27/11/2018 в 15:14
источник пользователем
На других языках...                            


4 ответов

голоса
0

Вот пример как в JavaScript и JQuery.

Vanilla JavaScript

function updateCountry (element, country) {
  var url = element.getAttribute('href');

  if (url.includes('country')) {
    url = url.replace(/(\?country=)[A-Z]{2}/, `$1${country}`)
  } else {
    url = url.concat(`?country=${country}`)
  };

  element.setAttribute('href', url);

  console.log(element.getAttribute('href'));
}

var element = document.getElementById('courses');

updateCountry(element, 'US'); // Add
updateCountry(element, 'UK'); // Update
<a id="courses" href="/courses">Courses</a>

JQuery

function updateCountry (element, country) {
  var url = element.attr('href');
  
  if (url.includes('country')) {
    url = url.replace(/(\?country=)[A-Z]{2}/, `$1${country}`)
  } else {
    url = url.concat(`?country=${country}`)
  };

  element.attr('href', url);

  console.log(element.attr('href'));
}

var element = $('#courses');

updateCountry(element, 'US'); // Add
updateCountry(element, 'UK'); // Update
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="courses" href="/courses">Courses</a>

Ответил 27/11/2018 в 15:17
источник пользователем

голоса
0

Использование JQuery .attr( function )для добавления / редактирования hrefатрибута элемента. В функции проверить , если атрибут не имеет countryпараметр, добавить к нему , и если есть изменить его.

$("#courses").attr("href", function(i, href){
  var index = href.indexOf("?");
  return (index == -1 ? href : href.substring(0, index)) + "?country=US";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="courses" href="/courses">Courses</a>

Ответил 27/11/2018 в 15:24
источник пользователем

голоса
0

Wrrite пользовательской функции для обработки добавления свойств в HREF атрибута.

// function to change href attribute

function addPropertyToCourses(prop,value) { 

   var courses = document.getElementById('courses');
   if (courses.href.indexOf("?") == -1) { 
      courses.href += "?"; 
   } else {
      courses.href += "&";
   }
   courses.href += prop + '=' + value;
}

(function() { 
 // add properties
    addPropertyToCourses("country", "UK");
    addPropertyToCourses("someProp", "someValue");
})();
<a id="courses" href="/courses">Courses</a>

Ответил 27/11/2018 в 15:26
источник пользователем

голоса
0

Вы можете передать функцию как второй параметр к .attr()изменить HREF атрибута.

Попробуйте следующим образом:

// set
$("#courses").attr('href','/courses?country=US'); 
console.log($("#courses").attr('href'));

// update
$('#setParam').click(function(){
  $("#courses").attr('href', function(_, el){
    return el.replace(/(country=)[a-z]+/ig, '$1UK');
  });
  console.log($("#courses").attr('href'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="courses" href="/courses">Courses</a>
<button id="setParam" type="button">Set Param</button>

Ответил 27/11/2018 в 15:27
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more