изменение фонового изображения несколько раз с помощью Javascript

Просто попробуйте сделать три изображения, нажав на них.изменение фонового изображения несколько раз с помощью Javascript

Вот мой код:

<script type="text/javascript"> 
function toggleImages(obj) { 
if(obj.style.backgroundImage == "url('images/none.jpg')") { 
    obj.style.backgroundImage = "url('images/iPhoneImage-300x300.jpg')"; 
} 
else if(obj.style.backgroundImage == "url('images/iPhoneImage-300x300.jpg')"){ 
    obj.style.backgroundImage = "url('images/smartphoneImage-300x300.jpg')"; 
} 
else if(obj.style.backgroundImage == "url('images/smartphoneImage-300x300.jpg')"){ 
obj.style.backgroundColor = "url('images/none.jpg')"; 
} 
} 

</script> 

<div onclick="toggleImages(this);" id="arrow1" style="background-image:url(images/none.jpg); display:block; width:300px; height:300px"></div>

Это работает, если я изменить цвет фона без изображения, но не фоновое изображение, которое заставляет меня думать, что он должен делать с URL.

благодарит за помощь

источник

2016-09-12 ggntc

дайте ему попробовать с классами вместо того, чтобы просто обновлять фоновое изображение или использовать фоновое положение с несколькими изображениями –

Это сработало! Спасибо GCyrillus! – ggntc

Моя консоль JavaScript печатает URL («изображения/none.jpg») двойные кавычки и вы проверяете с одним, вы должны использовать что-то другое, чтобы проверить его. Один из способов (не очень умный) заключается в следующем:

function toggleImages(obj) { 
    var tmp=obj.style.backgroundImage.replace(/url\(('|")/,'').replace(/('|")\)/,'') 
    if(tmp == "images/none.jpg") { 
     obj.style.backgroundImage = "url('images/iPhoneImage-300x300.jpg')"; 
    }else if(tmp == "images/iPhoneImage-300x300.jpg"){ 
     obj.style.backgroundImage = "url('images/smartphoneImage-300x300.jpg')"; 
    }else if(tmp == "images/smartphoneImage-300x300.jpg"){ 
     obj.style.backgroundImage = "url('images/none.jpg')"; 
    } 
    console.log(tmp); 
}

источник

2016-09-12 23:01:28 ban17

Вы можете поменять одиночные и двойные кавычки.
Также обратите внимание, что ваш код имеет один объект obj.style.backgroundColor, который должен быть obj.style.backgroundImage.

<script type="text/javascript"> 
function toggleImages(obj) { 
if(obj.style.backgroundImage == 'url("images/none.jpg")') { 
    obj.style.backgroundImage = 'url("images/iPhoneImage-300x300.jpg")'; 
} 
else if(obj.style.backgroundImage == 'url("images/iPhoneImage-300x300.jpg")'){ 
    obj.style.backgroundImage = 'url("images/smartphoneImage-300x300.jpg")'; 
} 
else if(obj.style.backgroundImage == 'url("images/smartphoneImage-300x300.jpg")'){ 
obj.style.backgroundImage = 'url("images/none.jpg")'; 
} 
} 

</script> 

<div onclick="toggleImages(this);" id="arrow1" style="background-image:url(images/none.jpg); display:block; width:300px; height:300px"></div>

источник

2016-09-12 23:35:16

изменение фонового изображения несколько раз с помощью Javascript

ответ

Смежные вопросы