Question

我有按钮，根据窗口宽度，我需要href值。当页面加载以及窗口调整大小时，应更新href值。

HTML

<a href="http://google.com" class="myButton js-button">Google</a>

jQuery

 $(function(){

      function mobileButtonLink(){

          var mobLoginLink = 'https://mobile.google.com',          
              $loginButton = $('.js-button'),                    
              storedLoginLink = $loginButton.attr('href'),          
              winwidth = $(window).width();    

        if (winwidth < 600) {
          $loginButton.attr('href', mobLoginLink);
          console.log(mobLoginLink);
        }else{
          console.log(storedLoginLink);
          $loginButton.attr('href', storedLoginLink); 

        } 
      } 

      mobileButtonLink();

      $(window).resize(mobileButtonLink);


    });

如果在600以下视口中加载页面，则

大于600时，不会通过旧的href值进行更新。有没有更好的方法来通过使用揭示模式等来实现这一目标。

Answer 1

查看我的lib enquire.js，这只适用于此类事情。它使用媒体查询而不是读取窗口宽度。它的性能优于监听原始调整大小事件，因为浏览器仅在需要时触发媒体查询事件。

enquire.register("(max-width: 600px)", {
    urls : {
        mobile : "https://mobile.google.com"
    },

    setup : function() {
        this.link = document.querySelector("a");
        this.urls.original = this.link.href;
    },

    match : function() {
        this.link.href = this.urls.mobile;
    },

    unmatch : function() {
        this.link.href = this.urls.original;
    }
});

这里有一个小提琴，展示了它的实际效果：http://jsfiddle.net/WickyNilliams/6p0Lz7xa/

Answer 2

将原始href值存储在函数外部：

$(function(){
   storedLoginLink = $('.js-button').attr('href')  // <----|
  function mobileButtonLink(){                          // | 
      var mobLoginLink = 'https://mobile.google.com',   // |       
          $loginButton = $('.js-button'),      // ---------|
          winwidth = $(window).width();    

    if (winwidth < 600) {
      $loginButton.attr('href', mobLoginLink);
      console.log(mobLoginLink);
    }else{
      $loginButton.attr('href', storedLoginLink); 

    } 
  } 

  mobileButtonLink();

  $(window).resize(mobileButtonLink);


});

Answer 3

使其更简单，只需在调整大小时根据窗口宽度切换href，并在加载时触发调整大小

$(function(){
  var hrefs = [$('.js-button').attr('href'), 'https://mobile.google.com'];

  $(window).on('resize', function() {
    $('.js-button').attr('href', function() {
      return hrefs[$(window).width() < 600 ? 0 : 1];
    });
  }).trigger('resize');
});

JSBIN

根据窗口大小更改href

3 个答案: