Измените часть HREF на Hover jQuery

Question

У меня есть ссылки (mysite.com/#page-1, # page-2 ...). Я хочу изменить это на/page-1,/page-2 при наведении курсора соответственно (# -> /). Возможно ли это?

Я пытался идти по этому пути:

$('.page-link').hover(function() { 
    var text = $(this).href(); 
    $(this).href(href.replace('#', '')); 
}); 

Answer 1

Прежде всего, .hover принимает функции; один для in, один для out.

$('.page-link').hover(

    // mousein 
    function() { 

    // cache the original href 
    $(this).data("href", $(this).attr("href")); 

    // replace the existing href 
    $(this).attr("href", function(idx, val) { 

     // regexp match the page number 
     // $1 will be set to literal string "#page-" 
     // $2 will be a string of the page number 
     return val.replace(/(#page-)(\d+)$/, function(str, $1, $2) { 

     // parse as int and increment by 1 
     return $1 + (parseInt($2, 10) + 1); 
     }); 
    }); 
    }, 

    // mouseout 
    function() { 

    // restore the original href from the "cache" 
    $(this).attr("href", $(this).data("href")); 

    // clear the cache 
    $(this).data("href", null); 
    } 
); 

Демо-версия, справа?

$('.page-link').hover(
 
    function() { 
 
    $(this).data("href", $(this).attr("href")); 
 
    $(this).attr("href", function(idx, val) { 
 
     return val.replace(/(#page-)(\d+)$/, function(str, $1, $2) { 
 
     return $1 + (parseInt($2, 10) + 1); 
 
     }); 
 
    }); 
 
    }, 
 
    function() { 
 
    $(this).attr("href", $(this).data("href")); 
 
    $(this).data("href", null); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#page-1" class="page-link">next page</a> 
 
<a href="#page-2" class="page-link">next page</a> 
 
<a href="#page-50" class="page-link">next page</a>

Если у Вас есть содержание перед #page-N части href, как это:

<a href="blahblah/#page-1">...</a> 

Вам нужно будет настроить .replace вызов этой

return val.replace(/^(.*#page-)(\d+)$/, function(str, $1, $2) { 
    return $1 + (parseInt($2, 10) + 1); 
}); 

Это позволит убедиться, что полностьюhref обновлен (не просто заменен на участок #page-N). Такое недовольство можно было бы избежать, если JavaScript RegExp поддерживал lookbehind, но, к сожалению, этого не происходит.

---

Все, что сказал Тхо, вы, вероятно, следует рассчитать необходимую нумерацию страниц вместо того, чтобы пытаться понять это после того, как-фактум в HTML