用 jQuery 更改后重置 Href

Question

How can I reset an href after changing it using jQuery (or javascript)?

I change the URL by appending a keyword. But each time the user changes the keyword or clicks submit, the keyword keeps getting appended to the last URL. I want new keywords to be added only to the original URL.

Note: I do not have access to the original URLs via javascript - they are created using WordPress (PHP/HTML/MySQL).

Working example:

 (function($) { $( "button" ).click(function() { // Get and display user's keyword var inputVal = document.getElementById("keyword").value; document.getElementById('display-keyword').innerHTML = "keyword: " + inputVal; // For each external URL $( ".launch a" ).each(function() { var testAppURL = $( this ).attr("href"); // external URL var launchURL = testAppURL + inputVal; // new external URL $( this ).attr("href", launchURL); // Set href to new external URL $( this ).html(launchURL); }); }); })(jQuery);

 * { font-size: 1.2rem; } a { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" placeholder="Enter a keyword" id="keyword"> <button type="button">Set Keyword</button> <p id='display-keyword'>&nbsp;</p> <div class="launch"> <a href="https://www.example.com/" target="_blank" rel="noopener">Launch Me</a> <a href="https://www.websitenumb2.com/" target="_blank" rel="noopener">Launch Me</a> </div>

Answer 1

You could save the original URL in a data attribute and restore to that:

 (function($) { $( "button" ).click(function() { // Get and display user's keyword var inputVal = document.getElementById("keyword").value; document.getElementById('display-keyword').innerHTML = "keyword: " + inputVal; // For each external URL $( ".launch a" ).each(function() { var testAppURL = $( this ).attr("href"); // external URL var launchURL = $( this ).attr("data-href") + inputVal; // new external URL $( this ).attr("href", launchURL); // Set href to new external URL $( this ).html(launchURL); }); }); })(jQuery);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" placeholder="Enter a keyword" id="keyword"> <button type="button">Set Keyword</button> <p id='display-keyword'>&nbsp;</p> <div class="launch"> <a href="https://www.example.com/" data-href="https://www.example.com/" target="_blank" rel="noopener">Launch Me</a> <a href="https://www.websitenumb2.com/" data-href="https://www.websitenumb2.com/" target="_blank" rel="noopener">Launch Me</a> </div>