Question

我想使用jQuery将当前浏览器窗口维度添加到某些href标记的a末尾。

特定a代码的href标记都以secondary_imgs.php开头，但除此之外，不同之处在于包含数据，即secondary_imgs.php?Id=x&Title=y。如果这有助于解决问题，我可以轻松地将所有这些标签设置为具有特定类。

我认为最好的方法是将&width=x&height=y附加到文档准备就绪的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_imgs.php代码。我认为这是指定它的最佳方式。但除此之外，我不知道我在哪里犯了错误。

对于下半部分，在调整窗口大小时替换值时，我认为使用.resize()是最好的触发函数，但我不知道如何将其设置为替换值，而不是添加它们。

非常感谢任何帮助。谢谢。

Answer 1

在循环this中指的是DOM元素，因此您不能在其上使用append方法。此外，append方法在元素内添加元素，它不会连接字符串。

要将width和height变量的值放在字符串中，您必须将它们连接成一个字符串。将变量名称放在字符串中不会对它们进行评估。

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

如果您想在用户点击链接时获取窗口大小而不是页面加载时的大小，那么您宁愿捕获click事件，创建一个新URL并自己应用它：< / p>

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

Answer 2

我可以建议一种不同的方法吗？

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

(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) ;

N.B。 - 你仍然需要确保你的href包含'？'在使用'＆amp;作为第一个附加的角色。

Answer 3

我认为问题出在这一行：

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

尝试

$(this).attr('href', function(i, val) {
      return val + '&w=width&h=height';
});

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

3 个答案:

编辑：