Tengo la URL para la página 1 como http://www.dev-crn.com:5703/tag/Cloud al hacer clic en el botón siguiente. Necesito la URL actualizada para la página 2 como http://www.dev-crn.com: 5703/tag/Cloud/1 ¿Cómo puedo hacer eso en javascript o jquery? ya tengo un parámetro declarado como var pagenumber y var urlPath = window.location.pathname; donde se obtiene el enlace. ¿Cómo hacer que sea una forma dinámica de incrementar la url?
El número de página es el total de páginas presentes en mi caso, tengo 8 páginas, por lo que cada vez que hago clic en el siguiente botón, necesito incrementar la URL hasta 8 páginas.
window.location = `${window.location.host}/tag/Cloud/${pagenumber}`;
No puede "aumentar" una URL, pero puede aumentar los números y usarlos para crear sus URL.
const BASE_URL = "https://example.com"; const MAX_POSITIONS = 8; const BTN_NEXT = document.getElementById("btn-next"); const BTN_PREV = document.getElementById("btn-prev"); const URL_VALUE = document.getElementById("url-value"); const _createUrl = function(position) { if (position > 0) { return BASE_URL + "/" + position; } return BASE_URL; }; let currentPosition = 0; BTN_NEXT.addEventListener("click", function() { if (currentPosition === MAX_POSITIONS - 1) { return; } currentPosition++; URL_VALUE.textContent = _createUrl(currentPosition); }); BTN_PREV.addEventListener("click", function() { if (currentPosition === 0) { return; } currentPosition--; URL_VALUE.textContent = _createUrl(currentPosition); });
<button id="btn-next">Next</button> <button id="btn-prev">Prev</button> <div> <h4>URL</h4> <span id="url-value"></span> </div>
¿Puedes probar esto?
Tendrás estos tres botones para todas tus páginas.
Simplemente cambie el valor del botón central para cada página.
Espero haber entendido tus requisitos.
$('.change_page').click(function() { var this_page = $('#this_page').html(); var new_location = ''; var this_location = window.location.href; var this_action = $(this).attr('id'); if (this_action == 'previous' && this_page != '1') { var page_number = parseInt(this_page) - 1; new_location = this_location + '/' + page_number; } if (this_action == 'next' && this_page != '8') { var page_number = parseInt(this_page) + 1; new_location = this_location + '/' + page_number; } console.log(new_location); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> This page is currently on page number 4<br/> <button id="previous" class="change_page">previous</button> <button id="this_page">4</button> <button id="next" class="change_page">next</button>