使用JavaScript/jQuery设置元素背景图及跳转链接问题

嘿，我一眼就看出问题在哪啦！你用jQuery.css()方法同时设置背景图和href是行不通的——因为href是HTML元素的属性，根本不是CSS样式属性，css()方法只负责处理CSS相关的样式，所以你的跳转链接代码完全没起作用。

正确的实现方式分两种情况： #

1. 如果.background本身是<a>标签

直接用attr()方法来设置href属性就好，和设置背景图的代码分开写：

$( ".background" )
  .css("background-image", "url(https://www.example.com/image1.png)")
  .attr("href", "https://www.example.com");

2. 如果.background是其他元素（比如<div>、<span>）

这类元素本身没有href属性，我们需要给它绑定点击事件来实现跳转，同时建议加上cursor: pointer的样式，让用户知道这是可点击的：

$( ".background" )
  .css({
    "background-image": "url(https://www.example.com/image1.png)",
    "cursor": "pointer" // 让鼠标悬停时变成手型，提示可点击
  })
  .on("click", function() {
    window.location.href = "https://www.example.com";
  });

适配GTM变量的写法 #

因为你需要用GTM里的变量构建地址，直接把变量替换进去就行（假设GTM图片变量是{{Image URL}}，链接变量是{{Link URL}}）：

// 针对a标签的版本
$( ".background" )
  .css("background-image", `url(${ {{Image URL}} })`)
  .attr("href", {{Link URL}});

// 针对非a标签的版本
$( ".background" )
  .css({
    "background-image": `url(${ {{Image URL}} })`,
    "cursor": "pointer"
  })
  .on("click", function() {
    window.location.href = {{Link URL}};
  });

这样修改后，背景图和跳转链接就能正常工作啦～

内容的提问来源于stack exchange，提问作者J. Ayo