Question

使用javascript，我想在输入特定的url params时更改div类的背景图像。但是它没有在后台切换图像。

示例网址：

 example.com?campaignid=street

HTML

<div class="row-background-79134">
    <p>Some content here</p>
</div>

脚本在这里：

<script>
function getQueryParams(qs) {
    qs = qs.split('+').join(' ');
    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;
    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }
    return params;
}

var query = getQueryParams(document.location.search);
var myCampaign = query.campaignid;


if (myCampaign == "street"){
   var elems = document.getElementsByClassName('row-background-79134');
    for(var i = 0; i < elems.length; i++) {
    elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;'
}

if (myCampaign == "plumber"){
   var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
elems[i].style.background = 'url(https://example.com/image2.jpg) no-repeat center center;'
}

if (myCampaign == "cowboy"){
   var elems = document.getElementsByClassName('row-background-79134');
    for(var i = 0; i < elems.length; i++) {
    elems[i].style.background = 'url(https://example.com/image3.jpg) no-repeat center center;'
}

if (myCampaign == "hairdresser"){
   var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
elems[i].style.background = 'url(https://example.com/image4.jpg) no-repeat center center;'
}

</script>

对此的任何帮助都会很棒。

Answer 1

每个块

if (myCampaign == "street"){
   var elems = document.getElementsByClassName('row-background-79134');
    for(var i = 0; i < elems.length; i++) {
    elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;'
}

应该用额外的括号重写，比如

if (myCampaign == "street"){
   var elems = document.getElementsByClassName('row-background-79134');
   for(var i = 0; i < elems.length; i++) {
       elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;';
   } // added this
}

还考虑添加一些日志记录。使用console.log向您显示正在进行的操作，并打开浏览器控制台以阅读输出。例如，您可能想知道myCampaign的值是什么。

console.log(myCampaign);

将帮助，靠近顶部。还有其他方法可以使代码更容易阅读/维护，但是正确的方法应该是第一步。

Answer 2

您的代码if语句缺少结束括号}。但是，这里的主要问题是你的代码比应该的大得多，并且是一个多余的混乱。

要解决此问题，最好将广告系列名称和图片值存储在对象中，然后使用一个 if语句：

＆＃13;

//This would be the value you get from the URL, I've replaced it with a prompt for demo purposes
var campaignName = prompt("campaign name? (leave blank for default)") || "street";

//Object containing a name/image pair for each of the campaigns
var campaigns = {
  street: "image1.jpg",
  plumber: "image2.jpg",
  cowboy: "image3.jpg",
  hairdresser: "image4.jpg"
};

//If a campaign with the name exists
if (campaigns[campaignName]) {
  
  //Select elements by class name
  var elems = document.getElementsByClassName('row-background-79134');
  
  //Loop through elements
  for (var i = 0; i < elems.length; i++) {
    
    //Since we have the other styles added with CSS, we only have to set the background-image
    elems[i].style.backgroundImage = 'url(https://example.com/' + campaigns[campaignName] + ')';
    
    //Logging for demo purposes
    console.log("Added image to", elems[i]);
  }
}

＆＃13;

.row-background-79134 {
  background-repeat: no-repeat;
  background-position: center;
}

＆＃13;

<div class="row-background-79134"></div>
<div class="row-background-79134"></div>
<div class="row-background-79134"></div>
<div class="row-background-79134"></div>

＆＃13;

更清洁，更简单，更容易调试。

如果您想添加新的广告系列/图片，只需将其添加到广告系列对象：

var campaigns = {
  street: "image1.jpg",
  plumber: "image2.jpg",
  cowboy: "image3.jpg",
  hairdresser: "image4.jpg",
  chef: "image5.jpg",
};

Answer 3

试试这个，代码中存在语法问题。您没有正确关闭括号。

if (myCampaign == "street"){
   var elems = document.getElementsByClassName('row-background-79134');
   for(var i = 0; i < elems.length; i++) {
   elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;'
   }
}

if (myCampaign == "plumber"){
   var elems = document.getElementsByClassName('row-background-79134');
    for(var i = 0; i < elems.length; i++) {
     elems[i].style.background = 'url(https://example.com/image2.jpg) no-repeat center center;'
    }
}

if (myCampaign == "cowboy"){
  var elems = document.getElementsByClassName('row-background-79134');
  for(var i = 0; i < elems.length; i++) {
  elems[i].style.background = 'url(https://example.com/image3.jpg) no-repeat center center;'
  }
}

if (myCampaign == "hairdresser"){
   var elems = document.getElementsByClassName('row-background-79134');
   for(var i = 0; i < elems.length; i++) {
     elems[i].style.background = 'url(https://example.com/image4.jpg) no-repeat center center;'
   }
}

Answer 4

在每个if括号中，你错过了一个应该关闭这个块的“}”。除此之外，在背景作业旁边你缺少一个“;”，

错误：

if (myCampaign == "cowboy"){
  var elems = document.getElementsByClassName('row-background-79134');
  for(var i = 0; i < elems.length; i++) {
     elems[i].style.background = 'url(https://example.com/image3.jpg no-repeat center center;'
  }

对：

if (myCampaign == "cowboy"){
  var elems = document.getElementsByClassName('row-background-79134');
  for(var i = 0; i < elems.length; i++) {
     elems[i].style.background = 'url(https://example.com/image3.jpg no-repeat center center;';
  }
}

如果您想缩短当前代码，请使用jQuery。

JavaScript：

var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
 elems[i].style.background = 'url(https://example.com/image4.jpg) no-repeat center center;';
}

的jQuery

$(".row-background-79134").css("background","url('https://example.com/image4.jpg') no-repeat center center");

使用Javascript更改CSS元素

4 个答案: