Изменение элементов CSS с использованием Javascript

Question

Использование javascript, я пытаюсь изменить фоновое изображение div-класса при вводе определенных параметров URL. Однако он не переключает изображение в фоновом режиме.

Пример URL:

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 == "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 2

Каждое из этих блоков

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 3

В каждом случае, если у вас есть скобка, вы не видите «}», который должен закрыть этот блок. В дополнении к этому, рядом с фоном присвоения вам не хватает «;»,

неправильно:

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

Answer 4

Ваш код if заявления не хватает закрывающей скобки }. Однако главная проблема заключается в том, что ваш код намного больше, чем должен быть, и является избыточным беспорядком.

Чтобы это исправить, это гораздо лучше, идея хранить имена кампании и значения изображения в объекте, то есть одинif заявление:

//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]); 
 
    } 
 
}

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

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

Намного чище, проще и легче отлаживать.

Если вы хотите добавить новую кампанию/изображение, просто добавьте его в походах объект:

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