jQuery:将浏览器窗口尺寸附加到href

我想使用jQuery将当前浏览器窗口尺寸添加到某些

a

标记的

href

末尾

特定的

a

标记都有其

href

以

secondary\u imgs.php

开头，但除此之外，它们的不同之处在于包含数据，即

secondary\u imgs.php？Id=x&Title=y

。如果这有助于解决问题，我可以轻松地将所有这些标记设置为具有特定类

我认为最好的方法是将

&width=x&height=y

附加到documentready上的

href

的末尾，然后设置第二个函数来替换这些值，无论何时调整页面大小

唉，我不知道如何完成这项工作。我有组成部分（我想），但需要帮助以正确的方式将它们结合起来

以下是我到目前为止得到的信息：

$(document).ready(function () {
    var width = $(window).width();
    var height = $(window).height();
    $("a[href^='secondary_imgs.php']").attr('href', function() {
        return this.append('&w=width&h=height') 
    });
});

我试着只指定

a

标记谁的

href

以

secondary\u imgs.php

开头。我认为这是最好的具体说明方法。但除此之外，我不知道我在哪里犯了错误

在本文的后半部分，当窗口调整大小时，值被替换，我认为使用

.resize（）

触发函数是最好的，但是我不知道如何设置它来替换值，而不是添加到值中

---

任何帮助都将不胜感激。谢谢。

我能建议一种不同的方法吗

如果您等到有人单击链接，那么您只需进行一次计算，就可以忘记调整大小。只需绑定到链接的单击事件：

(function($) {
  $(document).ready(function () {
    $("a[href^='secondary_imgs.php']").bind({
      'click'  :  function(e) {
        var w = $(window).width();
        var h = $(window).height();
        $(this).attr('href', function() {
          return this.append('&w='+w+'&h='+h) ;
        });
      }
    }) ;
  });
})(jQuery) ;

---

注意-在将“&”用作第一个附加字符之前，您仍然需要确保href包含“？”。

我可以建议其他方法吗

如果您等到有人单击链接，那么您只需进行一次计算，就可以忘记调整大小。只需绑定到链接的单击事件：

(function($) {
  $(document).ready(function () {
    $("a[href^='secondary_imgs.php']").bind({
      'click'  :  function(e) {
        var w = $(window).width();
        var h = $(window).height();
        $(this).attr('href', function() {
          return this.append('&w='+w+'&h='+h) ;
        });
      }
    }) ;
  });
})(jQuery) ;

---

注意-在将“&”用作第一个附加字符之前，您仍然需要确保href包含“？”。

在循环中

此
引用DOM元素，因此您不能对其使用
append
方法。此外，append方法在元素中添加元素，它不连接字符串

要将
宽度
和
高度
变量的值放入字符串中，必须将它们关联到一个字符串中。将变量名放入字符串中不会对其求值

$(document).ready(function () {
  var width = $(window).width();
  var height = $(window).height();
  $("a[href^='secondary_imgs.php']").attr('href', function(index, attr) {
    return attr + '&w=' + width + '&h=' + height; 
  });
});

如果您希望在用户单击链接时获得窗口大小，而不是页面加载时的大小，那么您更希望捕获单击事件，创建一个新的URL并自己应用它：

$(document).ready(function () {
  $("a[href^='secondary_imgs.php']").click(function(e){
    e.preventDefault(); // stop the click
    var width = $(window).width();
    var height = $(window).height();
    var url = $(this).attr('href') + '&w=' + width + '&h=' + height;
    window.location.href = url; // replace the link action
  });
});

编辑：
为了与接管链接操作的其他脚本兼容，您应该确保在加载/激活该脚本之前绑定事件，并且只更改URL并将其写回，但首先检查是否有需要删除的属性：

$(document).ready(function () {
  $("a[href^='secondary_imgs.php']").click(function(e){
    var width = $(window).width();
    var height = $(window).height();
    var url = $(this).attr('href');
    var idx = url.indexOf('&w=');
    if (idx != -1) {
      url = url.substr(0, idx);
    }
    url += '&w=' + width + '&h=' + height;
    $(this).attr('href', url);
  });
});

在循环
中，此
引用DOM元素，因此不能对其使用
append
方法。此外，append方法在元素中添加元素，它不连接字符串

要将
宽度
和
高度
变量的值放入字符串中，必须将它们关联到一个字符串中。将变量名放入字符串中不会对其求值

$(document).ready(function () {
  var width = $(window).width();
  var height = $(window).height();
  $("a[href^='secondary_imgs.php']").attr('href', function(index, attr) {
    return attr + '&w=' + width + '&h=' + height; 
  });
});

如果您希望在用户单击链接时获得窗口大小，而不是页面加载时的大小，那么您更希望捕获单击事件，创建一个新的URL并自己应用它：

$(document).ready(function () {
  $("a[href^='secondary_imgs.php']").click(function(e){
    e.preventDefault(); // stop the click
    var width = $(window).width();
    var height = $(window).height();
    var url = $(this).attr('href') + '&w=' + width + '&h=' + height;
    window.location.href = url; // replace the link action
  });
});

编辑：
为了与接管链接操作的其他脚本兼容，您应该确保在加载/激活该脚本之前绑定事件，并且只更改URL并将其写回，但首先检查是否有需要删除的属性：

$(document).ready(function () {
  $("a[href^='secondary_imgs.php']").click(function(e){
    var width = $(window).width();
    var height = $(window).height();
    var url = $(this).attr('href');
    var idx = url.indexOf('&w=');
    if (idx != -1) {
      url = url.substr(0, idx);
    }
    url += '&w=' + width + '&h=' + height;
    $(this).attr('href', url);
  });
});

我认为问题出在这方面：

this.append('&w=width&h=height')

试一试

我认为问题出在这方面：

this.append('&w=width&h=height')

试一试

这实际上是我的第一种方法，但我担心数据不会在链接启动之前及时追加。你觉得会好吗？是的，已经有两组数据了，所以一开始只需要一个-。谢谢你的回答！这是完全正确的。。。除了.append（）中的代码将追加字符串“&w=width&h=height”。应为“&w=”+width+”&h=”+height+”。我还要小心使用“宽度”和“高度”作为变量名。还没有测试过，但是这些名字可能会给你IE带来问题。@maxedison-谢谢，修复了。stefmikhail-是的，在浏览器正常处理链接之前，将触发所有绑定事件。您唯一会遇到问题的时候是您将另一个函数绑定到了click，并且正在按照href属性进行ajax加载。然后你需要处理订购问题。在点击事件中这样做意味着链接只能正常工作一次。如果您再次单击它，事件处理程序将再次添加值。@Guffa。这是事实，因此如果用户在页面刷新之前多次单击链接，则应添加一些代码以删除w&h参数。但是，这仍然是正确的方法，因为它比绑定到窗口的大小更有效。这实际上是我的第一种方法，但我担心在触发链接之前数据不会及时追加。你觉得会好吗？是的，已经有两组数据了，所以一开始只需要一个-。谢谢你的回答！这是完全正确的。。。除了.append（）中的代码将追加字符串“&w=width&h=height”。应为“&w=”+width+”&h=”+height+”。我还要小心使用“宽度”和“高度”作为变量名。还没有测试过，但是这些名字可能会给你IE带来问题。@maxedison-谢谢，修复了。stefmikhail-是的，所有绑定事件将在l之前触发