Question

我有一个链接（mysite.com/#page-1,#page-2 ...）。我想分别在悬停时将其更改为/ page-1，/ page-2（＃ - ＆gt; /）。有可能吗？

我试图这样做：

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

Answer 1

首先，.hover采用 2 函数;一个用于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);
  }
);

演示时间，对吧？

＆＃13;

$('.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);
  }
);

＆＃13;

<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>

＆＃13;

如果您在#page-N的{{1}}部分之前有内容，请执行以下操作：

href

您需要调整<a href="blahblah/#page-1">...</a>对此

的调用

.replace

这将确保更新整个 return val.replace(/^(.*#page-)(\d+)$/, function(str, $1, $2) { return $1 + (parseInt($2, 10) + 1); });（不仅仅由href部分替换）。如果JavaScript RegExp支持lookbehind，则可以避免这种烦恼，但遗憾的是它没有。

所有这一切，你应该计算必要的分页，而不是试图在HTML后事后弄明白

在Hover jquery上更改Href的一部分

1 个答案: